CODEWITHSUNDEEP
jqueryjquery-mobile
glimmer
glimmer

Reputation: 626

JQuery Mobile Select List alignment

I have a JQuery Mobile Form which works great apart from a select list item that does not align correctly. I can't add a picture yet, but all the fields have the label on the left, a gap and then the fields all aligned. The select menu leaves out the gap and has the field aligned immediately after the label and thus it is to the left of all the other labels.

A relevant snippet of the code is here:

<div data-role="fieldcontain">
<label for="sms-alert"><b>SMS Alert:</b></label>
        <select name="sms-alert" id="sms-alert" data-role="slider">
             <option value="off">Off</option>
        <option value="on" selected="true">On</option>
        </select> 
</div>

<div data-role="fieldcontain" >
    <label for="user_group" ><b>User Group:</b></label>
    <select name="select_user_group" id="select_user_group" >
        <option value="manager" >Manager</option>
        <option value="delivery" >Delivery</option>
        <option value="kitchen" >Kitchen</option>
        <option value="serving" >Serving</option>
    </select>
</div>

...

I have no CSS specific style features for this item. The behaviour is the same on the eclipse IDE browser, Chrome and iOS Chrome, Safari and iOS Safari.

Any clues would be appreciated.

Thanks,

Glenn

Upvotes: 2

Views: 919

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You have an error at the second select label. This *for="user_group"* is not a correct one, it needs to point to *correct id="select_user_group"*. So your second select box should look like this:

        <div data-role="fieldcontain" >
            <label for="user_group"  class="select"><b>User Group:</b></label>
            <select name="user_group" id="user_group" >
                <option value="manager" >Manager</option>
                <option value="delivery" >Delivery</option>
                <option value="kitchen" >Kitchen</option>
                <option value="serving" >Serving</option>
            </select>
        </div>

And here's an working example for you: http://jsfiddle.net/Gajotres/Y3pzf/

Upvotes: 1

Related Questions