using Jquery Ui - setting width on a particular multiselect box

I am using Jquery UI like this:

$("#companyType").multiselect({
  multiple: false,
  header: "Typ开发者_运维技巧e",
  noneSelectedText: "Type",
  selectedList: 1
});
$('.ui-multiselect').css('width', '100px');

What I'd like to do is set the .ui-multiselect for only the #companyType div. Something like this:

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

Is there a way to do this? Thank you!

Try this code with minWidth option. It is the minimum width of the entire widget in pixels. Setting to “auto” will disable, and the default is: 225

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

not sure what version you use, but v1.5 includes a new "classes" parameter that you can set for styling your multiselect element.

Have a look here on how to use it : http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ it says

Additional class(es) to apply to BOTH the button and menu for further customization. Separate multiple classes with a space. You’ll need to scope your CSS to differentiate between the button/menu:

Example

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

then in the css file use:

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

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

If you want to set that particular css rule for only elements with class .ui-multiselect contained in the div #companyType I think jquery ui has no influence in it. Try this:

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

This will set width = 100px to all elements contained in #companyType that have a class 'ui-multiselect'

Another simple method for adding width to the multiselect list box is like these It is easy than adding another class or inline styling

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

This will set a with of 200 px to the specified list box

For the reference, if you want to a percentage for the width (e.g 100%) apply it within resize event of the window.

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

You can also assign it to another element's width dynamically:

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