How to display two text inputs side by side in jQuery mobile?

Question

I am trying to create a form with jQuery mobile, and I'm trying desparately to have two fields side-by-side, so they can pick the date and time on one line. So far I haven't seen anyone implement this without dividing the whole form into two columns. Also jQuery mobile puts a nice <hr> between fieldsets on small screens, but doesn't seem to do this after the

<div class="ui-field-contain">
    <fieldset class="ui-grid-a">
        <div data-role="fieldcontain" class="ui-block-a">
            <label for="date">Start date:</label>
           <input type="date" name="date" id="date" value="">
        </div>
        <div data-role="fieldcontain" class="ui-block-b">
            <label for="time">Start time:</label>
            <input type="time" name="time" id="time" value="">
        </div>
    </fieldset>
</div>

This is what I have so far - I have a lot of extra parts / classes that probably duplicate the same thing - could those be interfering with each other? Also I'm using JQuery Mobile 1.3 as that's what the rest of my app is build with, as I hear there are some breaking changes if I import v1.4.

Requisite JSFiddle

Edit: I figured out the missing <hr> , it's because the enclosing div needs data-role="fieldcontain". Wish there was a good explanation on <fieldset> vs role=fieldcontain vs .ui-field-contain vs <controlgroup>

Answer 1

You need to add float properties, and clear: none to the "data-role:fieldcontain" elements. Here is a quick and dirty example. I would recommend using an additional CSS class for any of the common classes between the two:

https://jsfiddle.net/2xuqbL5e/

<div class="ui-field-contain">
    <fieldset class="ui-grid-a">
        <div data-role="fieldcontain" class="ui-block-a"><!-- Add float:left and clear:none -->
            <label for="date">Start date:</label>
           <input type="date" name="date" id="date" value="">
        </div>
        <div data-role="fieldcontain" class="ui-block-b"><!-- Add float:right and clear:none -->
            <label for="time">Start time:</label>
            <input type="time" name="time" id="time" value="">
        </div>
    </fieldset>

Edit: sorry, my fiddle got screwed up. Should be fixed now.

Answer 2

Make the grid the outside container and then don't mix your grid cell divs and the fieldcontains:

<fieldset class="ui-grid-a sideByside">
    <div  class="ui-block-a">
        <fieldset data-role="fieldcontain">
          <label for="date">Start date:</label>
          <input type="date" name="date" id="date" value="">
        </fieldset>
    </div>
    <div class="ui-block-b">
        <fieldset data-role="fieldcontain">
            <label for="time">Start time:</label>
            <input type="time" name="time" id="time" value="">
        </fieldset>
    </div>
</fieldset>

You can add some CSS to get the cell spacing:

.sideByside .ui-block-a {
    padding-right: 6px;
}
.sideByside .ui-block-b {
    padding-left: 6px;
}

Updated FIDDLE