CODEWITHSUNDEEP
cssclassjquery-mobile
Anton Belev
Anton Belev

Reputation: 13613

Jquery mobile change css width depending on control's class

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.

Upvotes: 1

Views: 639

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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%;
}

Upvotes: 2

Related Questions