Multiple DateBoxes in a single row with JQM Datebox - jquery-mobile

Question

I am using JQM datebox but I cannot get it to show several date inputs in a single row. This is the closest I've got:
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<label for="fromDate">
From
</label>
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
<label for="toDate">
To
</label>
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</fieldset>
And it sets the width properly but keeps putting it into a new line:
Also, the date shown in the flipbox does not match the one actually selected (check the date on the title):
Plus the dialog is shown too much to the left and it gets cropped.
Any help please?

Answer 1

I have a solution that just uses DIVs and CSS outside of the jQM data-roles. Here is a DEMO
Basically, instead of fieldcontain and controlgroups, I have contained each label/date input pair in a DIV set to display inline instead of block. Then the label and input are each also in DIVs set to inline with min-widths. In this way:
if your screen is wide enough, everything is displayed in one line.
as your screen narrows, the second label/input pair rolls to the next
line
as your screen narrows even more the labels also stack on top of the
inputs.
In the fiddle, try dragging the splitter to the left of the results plain to see the form automatically configure itself to the available width.
So the HTML looks like this:
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="fromDate">From</label>
</div>
<div class="dispInline">
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
</div>
</div >
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="toDate">To</label>
</div>
<div class="dispInline">
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</div>
</div>
<!-- Clear floats for each new line -->
<div class="clearFloats"></div>
And the CSS looks like this:
.dispInline, .dispInlineLabel, .dispInlineCont{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 55px;
}
.dispInline{
min-width: 200px;
}
.clearFloats{
clear:both;
}
Of course you can mess with the min-widths to get the behavior you want. The ClearFloats allows you to add the next controls on the next line.