Jquery ui selectmenu: How to set dynamic width correctly?

Question

I would like to use jquery ui selectmenu from felixnagel. It works, but I have a problem with the fact that jquery always sets the width too small for selectmenu so that the text opens / closes. I know that I can set the width in the selectmenu () command, but I have several different selectmenus, so I would like to know where I can influence the correct calculation, how wide the selectmenu will be, so that I can give this extra px for the width .

I tried to find it in .js files, but since then I have not had time to work with it. I hope one of you has an idea of ​​what I can do here.

Many thanks

Ruven

Answer 1

, -

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


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

, width select. , , .

1: , - ( , CSS), - :

<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 2

.

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

, , :

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

Answer 3

, , , :

$("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);
})

, :

• ,
• auto,
• • 2 ( , - )

, , jquery-ui - , .

: http://jsfiddle.net/txo1mvhn/2/

Answer 4

.

css selectmenu :

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

Answer 5

:

CSS:

 select{
    width: 100%;
 }

JavaScript:

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