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
    })
})