How to get jQueryMobile select menus within a form to display full-width?

Question

I have a Jquerymobile form that includes text fields and a number of select menu options.

I started using <fieldset data-role="controlgroup" data-type="horizontal"> to organise the select menus - but they don't go to full-width. So I switched to using <div data-role="navbar"> instead .. this works well to arrange the menus to take up the screen-width.

However - when I include them within a form, there is an indentation around the select menus that I can't figure out how to remove. I'd like them to look like the top nav-bar (showing English-Français-Deutsch) ..

Any hints on how to remove the indentation around the select menus?

<div data-role="content" align="center">
        <div data-role="navbar">
             <ul>
                <li><a href="#page_english" data-transition="slide" class="ui-btn-b">English</a></li>
                <li><a href="#page_francais">Français</a></li>
                <li><a href="#page_deutsch">Deutsch</a></li>
            </ul>
        </div>
        <form method="post" action="getNewPass.php" data-ajax="false" id="register_english">
            <input type="text" name="FirstName" id="FirstName" value="" 
                               placeholder="First Name" class="required" minlength="1"/>
            <input type="text" name="LastName" id="LastName" value="" 
                               placeholder="Last Name" class="required" minlength="1"/>
            <input type="email" name="Email" id="Email" value="" 
                               placeholder="E-Mail Address" class="required email" minlength="3"/>
            <input type="text" name="Postcode" id="Postcode" value="" 
                               placeholder="Postcode" class="number" minlength="4"/>
            <div data-role="navbar">
                <ul>
                    <li><select name="Age" id="Age"> 
                        <option selected="selected" value="Age">Age</option>
                        <option value="Under 18">Under 18</option>
                        <option value="18-25">18-25</option>
                        <option value="26-30">26-30</option>
                        <option value="31-40">31-40</option>
                        <option value="41-50">41-50</option>
                        <option value="51-60">51-60</option>
                        <option value="Over 60">Over 60</option>
                        <option value="Don't Ask">Don't Ask</option>
                    </select></li>
                    <li><select name="Gender" id="Gender">
                        <option selected="selected" value="Gender">Gender</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select></li>
                </ul>
                <ul>
                    <li><select name="CustomerLanguage" id="CustomerLanguage">
                        <option selected="selected" value="CustomerLanguage">Language</option>
                        <option value="English">English</option>
                        <option value="Francais">Français</option>
                        <option value="Deutsch">Deutsch</option>
                    </select></li>
                    <li><select name="Device" id="Device">
                        <option selected="selected" value="Device">Device</option>
                        <option value="iPhone">iPhone</option>
                        <option value="Android">Android</option>
                        <option value="Other">Other</option>
                        <option value="Unknown">Not Sure</option>
                    </select></li>
                </ul>
            </div>
            <input type="image" name="submit" 
                   src="images/Send_to_Customer_Badge_240x80_US_UK.png" height="66" width="200" value="submit"/>

Answer 1

You still can use controlgroup widget and override controlgroup as well as select width.

Override controlgroup and inner wrapper width:

.ui-controlgroup, .ui-controlgroup-controls {
  width: 100%;
}

Override width of select menus within the wrapper.

.ui-controlgroup-controls .ui-select {
  width: 50%;
}

Demo