jQM Datebox Controls Wrapping

Question

I'm using a jQuery Mobile DateBox for simple date/time pickers. Unfortunately, the controls are wrapping, like so:

I'm just using basic form elements:

<label for="completedDate">Date: </label>
<input name="completedDate" id="completedDate" type="date" data-role="datebox" 
    data-options='{"mode": "datebox", "useFocus": true, "useButton": false, "useNewStyle": true}'>

The options 'useFocus', 'useButton', 'useNewStyle' have no impact, they're just there for the styling of the input control.

I've tried dialog, popup, and inline modes, to no avail.

I've only tested this in the stock Android 4.1 browser, along with desktop IE9 and Firefox 21.0, but it appears the same in all three.

I assume that it has something to do with the padding and width differences between the controls and the text fields, but I'm not sure what the "right" way to fix it is. I've gone through the options available, but none seem to display it correctly. I haven't changed any of the defaults, simply loaded the scripts and used the snippet I showed above.

Answer 1

You need to load the datebox style sheet as well.

http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.css