Using Jquery Ui - Installation Width in a Specific Multi-Sector

Question

I am using jQuery UI as follows:

$("#companyType").multiselect({ multiple: false, header: "Type", noneSelectedText: "Type", selectedList: 1 }); $('.ui-multiselect').css('width', '100px'); 

What I would like to do is set .ui-multiselect only for div #companyType. Something like that:

  $('#companyType.ui-multiselect').css('width', '100px'); 

Is there any way to do this? Thanks!

Answer 1

If you want to set this particular css rule only for elements with the .ui-multiselect class contained in the #companyType div, I think jquery ui does not affect it. Try the following:

 $('#companyType .ui-multiselect').css('width', '100px'); 

This will set width = 100px for all elements contained in #companyType that have the ui-multiselect class

Answer 2

not sure which version you are using, but v1.5 includes a new "classes" parameter that you can set to style your multiselect element.

See here how to use it: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ he says

Additional classes to apply to the bot button and menu for further customization. Separate multiple classes with space. You need to expand your CSS to distinguish a button / menu:

Example

 $("#companyType").multiselect({ classes : "myClass" }); 

then in the css file use:

 /* button */ .ui-multiselect.myClass {} /* menu */ .ui-multiselect-menu.myClass {} 

Answer 3

Try this code with the minWidth parameter. This is the minimum width of the entire widget in pixels. Installation on "auto" is disabled, and by default: 225

 $("#companyType").multiselect({ multiple: false, header: "Type", noneSelectedText: "Type", selectedList: 1 minWidth:100 }); 

Answer 4

Another easy way to add width to a multi-selection list box is similar. It's easy than adding another class or inline style.

 $('#companyType .ui-multiselect').width(200); 

This will install 200 px into the specified list.

Answer 5

For reference, if you want to use a percentage for the width (for example, 100%), apply it if you resize the window.

 $(window).resize(function () { $('#companyType .ui-multiselect').css('width', '100%'); }); 

You can also dynamically assign it to the width of the element:

 $(window).resize(function () { $('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width')); });