New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
adammessinger opened this Issue Mar 27, 2012 · 5 comments

Comments

Projects
None yet
3 participants
@adammessinger

adammessinger commented Mar 27, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 16, 2012

Member

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

Member

jaspermdegroot commented Apr 16, 2012

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

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Apr 16, 2012

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

adammessinger commented Apr 16, 2012

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

@ghost ghost assigned jaspermdegroot May 21, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 24, 2012

Contributor

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

Contributor

toddparker commented May 24, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 24, 2012

Member

Already done :-)

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

Member

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 8, 2012

Member

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

Member

jaspermdegroot commented Jun 8, 2012

@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