Draft to resolve issue #41 and may affect #86 as well.

yanickrochon · Feb 8, 2014 · 75bee64 · 75bee64
1 parent eda5417
commit 75bee64
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 53 deletions.
diff --git a/css/jquery.uix.multiselect.css b/css/jquery.uix.multiselect.css
@@ -1,15 +1,16 @@
 
 
-.uix-multiselect-original { position: absolute; left:-999999px; }
-.uix-multiselect { position: relative; float:left; }
-.uix-multiselect .multiselect-selected-list, .uix-multiselect .multiselect-available-list { position:absolute; overflow:hidden; }
+.uix-multiselect-original { position: absolute; left:999999px; }
+.uix-multiselect { position: relative; display:inline-block; }
+.uix-multiselect .uix-selected-list,
+.uix-multiselect .uix-available-list { position:absolute; overflow:hidden; }
 .uix-multiselect .ui-widget-header { overflow:hidden;  white-space:nowrap; padding:2px 4px; }
 .uix-multiselect .ui-widget-header div.header-text { white-space: nowrap; }
 .uix-multiselect .ui-widget-header .uix-control-right, .uix-multiselect .ui-widget-header .uix-control-left { width:16px; height:16px; }
 .uix-multiselect .ui-widget-header .uix-control-right { float:right; }
 .uix-multiselect .ui-widget-header .uix-control-left { float:left; }
 .uix-multiselect .ui-widget-header .uix-search { float:right; height:14px; font-size:80%; }
-.uix-multiselect .uix-list-container { position:relative; overflow:auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
+.uix-multiselect .uix-list-container { position:relative; height:100%; overflow:auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
 .uix-multiselect .uix-list-container .ui-priority-secondary { padding-right:0; }
 .uix-multiselect .group-element { position:relative; padding-left:0;  white-space:nowrap; overflow:hidden; }
 .uix-multiselect .group-element-collapsable { padding-left:16px; }
@@ -22,3 +23,8 @@
 .dragged-grouped-element { padding-left:16px; }
 .uix-multiselect .grouped-option { position:relative; padding-left:16px }
 .uix-multiselect .grouped-option .ui-icon { position:absolute; left:0; }
+
+.uix-multiselect .uix-table { width:100%; height:100%; table-layout:fixed; }
+.uix-multiselect .uix-table tr { vertical-align:top; }
+.uix-multiselect .uix-table tbody td { position:relative; }
+.uix-multiselect .uix-table td.uix-table-row { border:none; margin:0; padding:0; }
diff --git a/index.html b/index.html
@@ -157,7 +157,7 @@ <h1>Welcome to the jQuery Multiselect 2.0 Widget !</h1>
         <div id="usage_simple" style="position:relative;">
             <form action="" method="get">
             <h2>Simple usage</h2>
-            <div class="example-container ui-helper-clearfix">
+            <div class="example-container">
             <select id="multiselect_simple" name="multiselect" class="multiselect" multiple="multiple" style="width:60%">
                 <option value="ABW">Aruba</option>
                 <option value="AFG">Afghanistan</option>
@@ -421,7 +421,7 @@ <h2>Simple usage</h2>
         <div id="usage_disabled">
             <form action="" method="get">
             <h2>Disabled options</h2>
-            <div class="example-container ui-helper-clearfix">
+            <div class="example-container">
             <select id="multiselect_disabled" name="multiselect" class="multiselect" multiple="multiple">
                 <option value="And">Andromeda</option>
                 <option value="Ant" disabled="disabled">Antlia</option>
@@ -527,7 +527,7 @@ <h2>Disabled options</h2>
         <div id="usage_groups">
             <form action="" method="get">
             <h2>Group related options</h2>
-            <div class="example-container ui-helper-clearfix">
+            <div class="example-container">
             <select id="multiselect_groups" name="multiselect" class="multiselect" multiple="multiple">
             <optgroup label="Australia">
                 <option value="Holden">Holden</option>
@@ -756,7 +756,7 @@ <h2>Group related options</h2>
         <div id="usage_dynamic">
             <form action="" method="get">
             <h2>Dynamic usage</h2>
-            <div class="example-container ui-helper-clearfix">
+            <div class="example-container">
             <select id="multiselect_dynamic" name="multiselect" class="multiselect" multiple="multiple"></select>
             </div>