jquery ui selectmenu: How do i set the dynamic width correctly?

Question

i would like to use jquery ui selectmenu from felixnagel. it works but i have the problem that jquery always set a too small width for the selectmenu so that the open/close icon appears above the content. I know that i can set the width in the command selectmenu() but i have a couple of different selectmenus, so i would like to know where i can take influence on the correct calculation how wide the selectmenu will be, so that i can give it an additional px for the width.

I tried to find it in the .js files, but since now i was not successfull with it. Hopefully someone of you have an idea what i can do here.

thank you very much

Ruven

Answer 1

This is simple and makes it adjust based on content.

$( "select" ).selectmenu({ width : 'auto'});

This uses a hard coded width to avoid the problem when selecting items of different widths mentioned in the comment:

$( "select" ).selectmenu({ width : 250});

Answer 2

Maybe something like this will help you

<select width="200">
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})

You walk thru every select element and you will have the possibilty to specify the with in the select elements width attribute. Maybe you find it useful and can modify it so it fill your needs.

Edit 1: Or if you just want to add something extra thru code (I think you can do it also with CSS) you could use something like:

<select>
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).width() + 100}) // You just take the width of the current select and add some extra value to it
    })
})

Answer 3

It's kind of a hack and I don't know how robust this is but I've successfully used this in one particular instance:

$("select").each(function(){
    var $this=$(this);
    $this.selectmenu();
    var menu=$this.selectmenu("menuWidget");
    var button=$this.selectmenu("widget");
    button.click();
    var longest=null;
    menu.children("li").each(function(){
        var $this=$(this);
        if(longest==null || longest.text().length < $this.text().length){
            longest=$this;
        }
    });
    menu.css("width","auto");
    var width=longest.mouseover().width();
    button.click();
    var innerButton = button.find(".ui-selectmenu-text");
    var paddingRight=parseFloat(innerButton.css("padding-right"));
    var paddingLeft=parseFloat(innerButton.css("padding-left"));
    var total=width+paddingLeft+paddingRight + 2;
    $this.selectmenu("option","width", total);
})

In a nutshell what it does is:

• open the menu so that it is filled and laid out
• find its longest element
• set the menu width to auto, hover over the longest element and get its width
• close the menu
• get the left and right padding of the button widget
• add that to the computed width of the longest item and use that as the width
  • adding 2 pixels for good measure (I think it's borders or something)

It's just that it kind of heavily relies on how jquery-ui does things internally so it might break upon any update.

See this fiddle: http://jsfiddle.net/txo1mvhn/2/

Answer 4

Previous solutions were almost right.

You have to set css width and call selectmenu like this:

$('select').selectmenu({ width : $(this).css('width')});

Answer 5

For percentages, is like this:

Declare the percentage in your CSS:

 select{
    width: 100%;
 }

And in your JavaScript:

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);