Skip to content
This repository

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

Closed
adammessinger opened this Issue March 26, 2012 · 5 comments

3 participants

Adam Messinger Jasper de Groot Todd Parker
Adam Messinger

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).

Example: http://jsbin.com/omacox/34

Jasper de Groot
Owner

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: https://bugzilla.mozilla.org/show_bug.cgi?id=491549

Adam Messinger

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;
}
Todd Parker

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

Jasper de Groot
Owner
uGoMobi commented May 24, 2012

Already done :-)

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

Jasper de Groot uGoMobi closed this June 08, 2012
Jasper de Groot
Owner

@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
Something went wrong with that request. Please try again.