Jquery mobile change css width depending on control's class - css

Question

I'm currently experiencing the bad sides of JQM. I've got say two drop down list controls and I want to add different width to them depending on their class. How can I do it?
<asp:DropDownList runat="server" ID="ddlWidth1"
data-theme="e" </asp:DropDownList>
<asp:DropDownList runat="server" ID="ddlWidth2"
data-theme="e" </asp:DropDownList>
After rendering the HTM, JQM sets some classes and I can set the ddl's width like that:
.ui-select{
width: 225px;
}
But this makes both ddl's width the same. Adding css classes to the ddls won't help, because I'm losing these classes after the HTML is rendered.

Answer 1

This can be done easily, select box must be wrapped into appropriate data-role="fieldcontain" DIV. They are made specially for this purpose. Through them any inner form element can be modified easily.
Working example: http://jsfiddle.net/Gajotres/FvQ5c/
HTML:
<div data-role="fieldcontain" id="ddlWidth1">
<select>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="fieldcontain" id="ddlWidth2">
<select>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
CSS:
#ddlWidth1 .ui-select {
width: 225px;
}
#ddlWidth2 .ui-select {
width: 100%;
}