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 .

Taphole

can u provide class details for 'smallSelect' and 'bigSelect' – Rath

If that's your actual code.. you're missing a couple " marks – Inulin

sorry for those small errors as this I typed here for question purpose . – Taphole

@Rath the code of smallSelect and bigSelect is similar to 'selector' default class provided by uniform . I have simply replaced 'selector' with 'smallSelect' so there can not be problem . – Taphole

@beginner I have updated the answer please check this – Rath

Please change the answer on this post. The marked answer is NOT correct. It's nice to do that for other people that will come on this post so they don't get the wrong information. – Natividad

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>

Lineation

This didn't work for me. Styles on the element are overriding the span styles, I had to remove the references to width in uniform.default.css – Alys

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.

Martino

Answer 3

uniform.default.css is using image sprite.png for themes.

In this image width of various control is defined. So you can not change them as your requirement.

Rath

can you suggest any other library/plugin which is capable of doing that . thx . – Taphole

Wrong answer, the images on the sprite accommodate for any size dropdown. You need to change the size of the "div.selector span" that is generated. That's it. – Energid

I agree, wrong answer. Styling .selector span allows the width to be adjusted. – Mcnair