jQuery Mobile 2 fields on one line example

Sam Deering
Tweet

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 JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

No Reader comments