jQuery Mobile 2 fields on one line example

Sam Deering

Just logging some code for getting two jquery mobile form inputs on one line.

Should look something like this:

Image

HTML

 
<div data-role="fieldcontain" class="halffield ui-field-contain ui-body ui-br">
    <span class="label">*First Name:</span>
    <span class="inlineinput">
        <input type='text' class="required ui-input-text ui-body-d ui-corner-none ui-shadow-inset" />
    </span>
    <span class="label">*Last Name:</span>
    <span class="inlineinput">
        <input type='text' class="required ui-input-text ui-body-d ui-corner-none ui-shadow-inset" />
    </span>
</div>

CSS

 
/* register fields span 2 */
.halffield span.label {
    width: 120px !important;
    display: inline-block;
    margin-left: 15px;
}
.halffield input {
    width: 240px !important;
}
.halffield input:last-child {
    margin-right: 10px;
}

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.