Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
You can add it in asp dropdownlist tag.EX: <asp:DropDownList runat="server" ID="ddlWidth1" Width="225px" data-theme="e" </asp:DropDownList> – Ani Jun 20 at 14:27
Not appropriate, also I doubt it will work anyway. – Anton Belev Jun 20 at 14:29
I think it should work. Or you Can you add using id instead of class ? – Ani Jun 20 at 14:31

1 Answer

up vote 2 down vote accepted

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%;
}
share|improve this answer
Wow that's great! : ) Thank you very much! – Anton Belev Jun 20 at 18:01
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. – Anton Belev Jun 21 at 14:10
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. – Gajotres Jun 21 at 14:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.