Selects in horizontal control group w/ other control types misaligned in FF #3922

adammessinger opened this Issue Mar 27, 2012 · 5 comments


None yet

3 participants


A select menu placed into a horizontal control group with buttons -- link buttons, inputs, or button elements -- will be slightly out of alignment with its pals in Firefox (both desktop and mobile).



The combination of inline-block and overflow hidden for the ui-btn element nested in ui-select causes the misalignment.
This is a FF bug, although they don't see it as a bug:


Interesting. According to the Mozilla devs, jQM's horizontal control group layout CSS is dependent on a WebKit bug. Thanks for the tip, @uGoMobi.

Giving the children of a horizontal control group any non-baseline vertical-align fixes this issue with no negative effects in WebKit browsers:

.ui-controlgroup-horizontal .ui-btn,
.ui-controlgroup-horizontal .ui-select {
  vertical-align: top;

@uGoMobi - this might be worth looking at adding. Thanks for the tip @adammessinger


Already done :-)

This will be part of PR for "standardize buttons and form" (#4098) if I don't see odd things while testing.


@adammessinger - I decided to change the controlgroup buttons from display inline-block to float left. Another solution, same result :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment