Dimensions 2 (#744)

1. Updated sizing/dimensions code.
2. Added text wrapping option.
3. Using getBoundingClientRect()
4. Updating CSS
5. Add support for native select placeholder text

Author: SteveTheTechie

css/jquery.multiselect.css

@@ -1,25 +1,35 @@
-.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
-.ui-multiselect .ui-icon { float:right }
-.ui-multiselect-single .ui-multiselect-checkboxes input { left:-9999px; position:absolute !important; top: auto !important; }
-.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }
+.ui-multiselect {box-sizing: border-box; padding:2px 0 2px 4px; text-align:left;}
+.ui-multiselect .ui-multiselect-open { float:right }
+
+.ui-multiselect-menu { display:none; box-sizing:border-box; position:absolute; text-align:left; z-index:1010; width:auto; padding:3px;}
 
-.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px; }
+.ui-multiselect-header { display:block; box-sizing:border-box; position:relative; width:auto; padding:3px 0 3px 4px; margin-bottom:3px;}
 .ui-multiselect-header > ul { font-size:0.9em }
-.ui-multiselect-header > ul > li { float:left; padding:0 10px 0 0; }
+.ui-multiselect-header > ul > li { float:left; padding:0 10px 0 0;}
 .ui-multiselect-header a { text-decoration:none; }
 .ui-multiselect-header a:hover { text-decoration:underline; cursor: pointer;}
 .ui-multiselect-header .ui-icon { float:left; }
 .ui-multiselect-header .ui-multiselect-close { float:right; padding-right:0; text-align:right; }
 
-.ui-multiselect-menu { display:none; padding:3px; position:absolute; text-align: left; }
-.ui-multiselect-checkboxes { overflow-y:auto; position:relative; }
-.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px; }
-.ui-multiselect-checkboxes label > input { position:relative; top:1px }
+.ui-multiselect-checkboxes { display:block; box-sizing:border-box; position:relative; overflow:auto; width: auto; border: 0;}
+.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px;}
+.ui-multiselect-checkboxes label > input { position:relative; top:1px; }
 .ui-multiselect-checkboxes label img { height: 30px; vertical-align: middle; padding-right: 3px;}
-.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; list-style: none; padding-right:3px; }
-.ui-multiselect-checkboxes > .ui-multiselect-optgroup { padding: 3px; }
-.ui-multiselect-columns { display: inline-block; vertical-align: top; }
 .ui-multiselect-checkboxes > .ui-multiselect-optgroup > a { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
+.ui-multiselect-checkboxes > .ui-multiselect-optgroup > ul { padding: 3px; }
+.ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup) { clear:both; font-size:0.9em; list-style: none; padding-right:3px;}
+.ui-multiselect-columns { display: inline-block; vertical-align: top; }
+
+.ui-multiselect-single .ui-multiselect-checkboxes input { left:-9999px; position:absolute !important; top: auto !important; }
+.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }
+
+.ui-multiselect.ui-multiselect-nowrap { white-space: nowrap}
+.ui-multiselect.ui-multiselect-nowrap > span {display: inline-block}
+.ui-multiselect-checkboxes.ui-multiselect-nowrap li,
+.ui-multiselect-checkboxes.ui-multiselect-nowrap a{ white-space: nowrap}
+
+.ui-multiselect-measure > .ui-multiselect-header,
+.ui-multiselect-measure > .ui-multiselect-checkboxes { float:left; }
 
 @media print{
     .ui-multiselect-menu {display: none;}