JQuery Mobile - Display An HTML Form Inline

Question

Goal: Display textbox and submit button on the same line in Jquery Mobile.

Problem: They will not display on the same line.

I\'

Answer 1

You can use a media query to show the button inline with the text input for larger screen widths and show the text-box over the submit button for smaller screen widths:

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;
}
@media all and (max-width:480px) {
    form .ui-input-text {
        width   : 100%;
    }
    form > .ui-btn {
        width   : 100%;
    }
}

Here is a demo: http://jsfiddle.net/fmJGR/

I am using the classes added by jQuery Mobile to target the elements, this is especially useful for working with the submit button since it's HTML structure after jQuery Mobile initializes it does not resemble the per-initialized element.

Here is what the submit button's HTML turns into after jQuery Mobile initializes it:

<div data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
        <span class="ui-btn-text">Add</span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
    </span>
    <input type="submit" value="Add" data-icon="plus" data-type="button" class="ui-btn-hidden" aria-disabled="false">
</div>

If you wish to support IE7 you will need to add the following code because IE7 doesn't understand display : inline-block:

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}

Answer 2

Add them into two separate columns within a row of HTML table also works.

Answer 3

Would a Grid Layout work?

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

HTML:

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
            <input type="text" name="id" value="Other">
    </div>
    <div class="ui-block-b">
            <input type="submit" data-type="button" data-icon="plus" value="Add">
    </div>
</fieldset>