Any way to force two elements to stay next to each other on the same row with JQuery Mobile?

Question

I want to have two elements stay on the same row.

Right now I have this code:

<fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <input type="text" id="textinput"/>
   <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</fieldset>

This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?

Answer 1

You need to override the jQM enhancements:

• http://jsfiddle.net/E4EVT/10/
• http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
• http://jsfiddle.net/E4EVT/42/ (Using the table layout)

JS

$('#textinput2').css('width','60%').css('display','inline');

HTML

<div>
    <!-- use span instead of label -->
    <span>Text:</span>
    <input type="text" id="textinput2"/>
    <br />
    <input type="button" id="searchbutton2" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</div>

I think you might want to look into the grid layout jQM offers

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