JQuery SumoSelect - multiple instances on page with different widths

Question

I am using the JQuery SumoSelect plugin but I have 2 combo boxes on my page. One needs to be longer than the other but SumoSelect doesn't take the width of the select element as its width and instead uses the width set in the css file.

I can change the width of the combo box and it shows correctly but the width of the dropdown selections is still governed by SumoSelect's css. Obviously the dropdown should be the same width as the actual element.

How can I have one box set to, say 200px and the other set to, say, 400px?

Thanks

Answer 1

Got it to work by changing the width in the sumoselect.css

FROM:

.SumoSelect{width: 200px;}

TO:

.SumoSelect{width: inherit;} 

Then wrapped each instance with the desired width (if necessary):

<div style="width:100px !important">
.
.
.
</div>