Unable to set width

[payneio]

This is somewhat of an issue with all jQM controls... but especially shows up with small fields like dates and times. It would be a tremendous improvement if we could inline date and time inputs next to one another rather than having an entire full-width field for every input.

For example, I'm trying to obtain this:

LABEL date_input time_input TO date_input_time_input

On wide screens, this should all be in one line. As the screen width gets smaller, the elements should wrap, in this order:

• after label
• keep date/time's together
• all elements

Even without this fuller functionality, I am having difficulty finding ANY method of sizing the datebox fields.

[jtsage]

From your description - I take it that this is an issue with the text input control (jQM) as well?

I agree that it's a good idea, but I'd kinda like to see jQM solve it, and copy their method - I do try and keep the codebase somewhat inline.

[jtsage]

Oh, and fwiw, width is set in the css class: .ui-input-datebox

You can override that if you want. Stick a !important behind it, and do that after loading the jQM-DateBox css.

[payneio]

Right. It is an issue with jQM controls. It does, however, have additional impact on your controls as date/times usually come together... sometimes both starting and ending (4 fields). I believe jQM handles this concept by allowing you to put some controls (radios, selects, buttons) in a horizontal "control-group". So... a feature request would be to either horizontal-control-group enable date/time boxes, or at least allow a configurable way to set width.

I have been successful in setting the width on the .ui-input-datebox classed element. However, it causes the text-box to go twice as tall for some reason, with the date at the top left and the calendar picker icon on the bottom right. I'm scanning through the css and attributes now to see if I can figure out why... but it is certainly non-trivial.

[jtsage]

Ah, yeah, I see your point. I'll see what I can do about a control-group.

fwiw, what you are seeing is the internal input being too long, and pushing the icon to the next line. Play with the width of:

.ui-input-datebox input { }

[jtsage]

Ok, I did just commit a bit of solution - or at least, a way to do this - use a layout grid. If used, the datebox input will be "full width" - you can see an example here: http://dev.jtsage.com/jQM-DateBox/tests/splitter.html