Responsive Form CSS
Permalink
I'm trying to make a simple form behave responsively. All controls can go side-to-side in wide windows, but need to be arranged in rows in narrow windows. I've got the hard stuff working; see
http://gondwanasoftware.net.au/exerbyte/index.php/form...
and also the attached screenshots.
The problem is that the date field's label drops too low in the narrow layout. This is bound to be a CSS problem, but I can't spot what's causing it. I'd appreciate help!
(The code is on a single page, and is an unholy marriage of output from c5's 'form' helper and straight HTML+JS for the date control, because I couldn't get c5's date control to use my local date format. I've raised the latter problem elsewhere.)
http://gondwanasoftware.net.au/exerbyte/index.php/form...
and also the attached screenshots.
The problem is that the date field's label drops too low in the narrow layout. This is bound to be a CSS problem, but I can't spot what's causing it. I'd appreciate help!
(The code is on a single page, and is an unholy marriage of output from c5's 'form' helper and straight HTML+JS for the date control, because I couldn't get c5's date control to use my local date format. I've raised the latter problem elsewhere.)
I get the problem with both IE11 and Firefox (latest) on Windows.
Note that it only occurs when the window is narrowed enough to force the form into multiple rows.
Note that it only occurs when the window is narrowed enough to force the form into multiple rows.
@Gondwana
You can try this:
You can try this:
.form-inline .form-control { display: inline-block; }
Mr. Dilkington, you're a genius. I'm in your debt.
What browser are you using?
In the latest Chrome on Windows, both labels are displaying at the same position relative to the input.