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:

    
        Add
        
    
    

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