make the minimum width of the multiselect configurable

diff --git a/core/css/multiselect.css b/core/css/multiselect.css
index ee4263517690c846198c368665118457e8258a47..1202ea18427163eea77791fdfd0d1d2814d00611 100644 (file)
--- a/core/css/multiselect.css
+++ b/core/css/multiselect.css
@@ -1,4 +1,5 @@
 ul.multiselectoptions { z-index:49; position:absolute; background-color:#fff; padding-top:.5em; border:1px solid #ddd; border-top:none; -moz-border-radius-bottomleft:.5em; -webkit-border-bottom-left-radius:.5em; border-bottom-left-radius:.5em; -moz-border-radius-bottomright:.5em; -webkit-border-bottom-right-radius:.5em; border-bottom-right-radius:.5em; -moz-box-shadow:0 1px 1px #ddd; -webkit-box-shadow:0 1px 1px #ddd; box-shadow:0 1px 1px #ddd; }
+ul.multiselectoptions>li{ white-space:nowrap; overflow: hidden; }
 div.multiselect { padding-right:.6em; display:inline; position:relative; display:inline-block; vertical-align: bottom; }
 div.multiselect.active { background-color:#fff; border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0; z-index:50; position:relative }
 div.multiselect>span:first-child { margin-right:2em; float:left; }

diff --git a/core/js/multiselect.js b/core/js/multiselect.js
index 263808240472d9041ea4f80a852a16a227d7be71..610e9193bb7fdb18d3d9b1a64b24cf06267e942d 100644 (file)
--- a/core/js/multiselect.js
+++ b/core/js/multiselect.js
@@ -9,23 +9,26 @@
                        'checked':[],
                        'oncheck':false,
                        'onuncheck':false,
+                       'minWidth': 'default;',
                };
-               $.extend(settings,options);                     
+               $.extend(settings,options);
                var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
-               if(settings.checked.length>0){
-                       button.children('span').first().text(settings.checked.join(', '));
-               }
                var span=$('<span/>');
                span.append(button);
                button.data('id',multiSelectId);
                button.selectedItems=[];
                this.hide();
                this.before(span);
-               settings.minWidth=button.width();
+               if(settings.minWidth=='default'){
+                       settings.minWidth=button.width();
+               }
                button.css('min-width',settings.minWidth);
                settings.minOuterWidth=button.outerWidth()-2;
                button.data('settings',settings);
-               
+               if(settings.checked.length>0){
+                       button.children('span').first().text(settings.checked.join(', '));
+               }
+
                button.click(function(event){
                        var button=$(this);
                        if(button.parent().children('ul').length>0){
@@ -83,13 +86,14 @@
                                        }
                                        var newOuterWidth=Math.max((button.outerWidth()-2),settings.minOuterWidth)+'px';
                                        var newWidth=Math.max(button.width(),settings.minWidth);
+                                       var pos=button.position();
                                        button.css('height',button.height());
                                        button.css('white-space','nowrap');
                                        button.css('width',oldWidth);
                                        button.animate({'width':newWidth},undefined,undefined,function(){
                                                button.css('width','');
                                        });
-                                       list.animate({'width':newOuterWidth});
+                                       list.animate({'width':newOuterWidth,'left':pos.left+3});
                                });
                                var li=$('<li></li>');
                                li.append(input).append(label);