Is it possible to use different size (width) select box with uniform (jquery plugin)?

Question

I want to use multiple select box with multiple width with uniform . Problem is when I do

$('#small').uniform({selectClass:'smallSelect'});

$('#big').uniform({selectClass:'bigSelect'});

<select id="small">
<option>test</option>
</select>

<select id="big">
<option>test2</option>
</select>

Only the first one gets applied i.e bigSelect gets ignored .

Answer 1

You can change the width of each select element by targeting the span that gets generated directly. The code creates a div wrapper with a unique id of uniform-yourid and child span element with the currently selected option. below is the css for your specified ids and you can add.

<style type="text/css">
#uniform-small span
{
    width:100px;
    text-align:center;
}
#uniform-big span
{
    width:200px;
    text-align:center;
}
</style>

Answer 2

@evanmcd, I was having the same problem as you and I found that if you set the selectAutoWidth to false it will take your css class into account.

$('select').uniform({selectAutoWidth: false});

and then in the css you define a style for .selector, which is the default cass for the div that holds the select itself.