Jquery mobile change css width depending on control's class

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.

You can add it in asp dropdownlist tag.EX: <asp:DropDownList runat="server" ID="ddlWidth1" Width="225px" data-theme="e" </asp:DropDownList> — Ani
– Ani, Commented Jun 20, 2013 at 14:27
I think it should work. Or you Can you add using id instead of class ? — Ani
– Ani, Commented Jun 20, 2013 at 14:31

Gajotres · Accepted Answer · 2013-06-20 15:13:19Z

2

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

answered Jun 20, 2013 at 15:13

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anton Belev Over a year ago

Btw are there any other ways to do this without fieldcontain? I'm asking because I've got 3 elements in a data-role="controlgroup" and when I wrap one of them into fieldcontain these 3 elements are not on the same line any more.

Gajotres Over a year ago

Then wrap them into empty span element, just give it correct id/class. You will get same effect and because span is not bloc element they will stay inline.

Collectives™ on Stack Overflow

Jquery mobile change css width depending on control's class

1 Answer 1

HTML:

CSS:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML:

CSS:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related