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

开发者_运维知识库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?

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

For Jquery Mobile 1.2.0

<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>

you need to add attribute data-inline="true" to the input elements.

CSS:

label {
   display: block;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    width: 212px; /* the width of twice your input (plus borders) */
}

And your HTML:

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

http://jsfiddle.net/ahallicks/BWsdk/

Edit:

Sorry, misread your question! If you want them all on the same line to start with use the following CSS:

label {
    float: left;
    margin-right: 12px;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    float: left;
    width: 212px; /* the width of twice your input (plus borders) */
}

http://jsfiddle.net/ahallicks/E4EVT/