JQuery for line inline mobile controls

Question

How do I display form controls, such as select boxes and others in a row in jquery, and display them vertically?

<label for="select-choice-0" class="select">Shipping method:</label> <select name="select-choice-0" id="select-choice-1"> <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> <label for="select-choice-2" class="select">Shipping method:</label> <select name="select-choice-2" id="select-choice-2"> <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> 

I do not want them to be in the same field with data type = "horizontal". Thanks

Answer 1

Alternative example using CSS and data-inline = "true" tag

• http://jsfiddle.net/CFXxt/

CSS

 #inline-select-container { overflow:auto; } #inline-select-left { float:left; } #inline-select-right { float:right; }​ 

HTML

 <div data-role="page" class="type-home"> <div data-role="content"> <div id="inline-select-container"> <div id="inline-select-left"> <select name="select-choice-0" id="select-choice-1" data-inline="true"> <option >Shipping method</option> <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 id="inline-select-right"> <select name="select-choice-2" id="select-choice-2" data-inline="true"> <option >Shipping method</option> <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> <br /> <br /> <div id="inline-select-container"> <div id="inline-select-left"> <label for="select-choice-0" class="select">Shipping method:</label> <select name="select-choice-0" id="select-choice-1" data-inline="true"> <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 id="inline-select-right"> <label for="select-choice-2" class="select">Shipping method:</label> <select name="select-choice-2" id="select-choice-2" data-inline="true"> <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> </div> </div>​ 

Answer 2

Does the grid work? Here is an example:

• http://jsfiddle.net/RM5eq/

HTML

 <div data-role="page" class="type-home"> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <select name="select-choice-0" id="select-choice-1"> <option>Shipping method</option> <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 class="ui-block-b"> <select name="select-choice-2" id="select-choice-2"> <option>Shipping method</option> <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> </div> </div>​ 

Documents for grid layout options

• http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 3

I liked jquery-mobile-960 .

jquery-mobile-960 is the 960 grid port for jQuery mobile. It combines the flexibility of 960.gs with the simplicity of jQuery mobile. It is designed to provide more flexibility for jquery-mobile layout and thus makes it easier to use on tablets.