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've tried many times to display the textbox and submit button on the same line, but it never works. Here is my code and the combinations I used...

<form method="GET" style="display: inline-block;">
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
</form>

That did not work.

<form method="GET">
   <span>
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
   </span>
</form>

Neither did this.

<form method="GET">
      <ul style="display: inline; list-style-type: none;">
          <li style="display: inline;"><input type="text" name="id" value="Other"></li>
          <li style="display: inline;"><input type="submit" data-type="button" value="Add"></li>
       </ul>
</form>

What am I doing wrong and how can I achieve my goal?

Thanks and merry Christmas!

Cyna

Answer 1

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>

Urbai

Grids seem to enforce equal sizes of all items in the grid. What if I want my input box to take 75% of the space, and the button next to it take 25% of the space? – Valentinvalentina

<div class="ui-block-a" style="width:75%"> <div class="ui-block-b" style="width:25%"> – Larue

You can also use ui-field-contain: <div class="ui-field-contain"></div> with label and input within it. – Rexfourd

Answer 2

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;
}

Einstein

Answer 3

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

Smallpox