Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Horizontal control groups in headers/footers have poor button spacing in FF #3948

Closed
adammessinger opened this Issue · 3 comments

3 participants

@adammessinger

At some screen widths, some of the buttons will be further apart than others in Firefox.

Example: http://jsbin.com/omacox/59
With CSS fix: http://jsbin.com/omacox/62

The fix above was created while consulting jquery.mobile.controlgroup.css in the master branch.

@Wilto Wilto was assigned
@Wilto

Hey @adammessinger!

We just landed a handful of tweaks to buttons’ padding, and we’re looking fairly consistent now. Could you review and make sure everything looks good on your side?

@adammessinger

Should the changes be showing up in the "Latest" build that's used by the JSbin template? If so, I'm still seeing the spacing problem.

Here's a screen shot of what I'm seeing in my test case on FF 11 for Windows: http://j.mp/HBnaX0

It's not always on the last button in the group, either. Centering the buttons in the header/footer bar causes the weird spacing to appear elsewhere and to become dependent on window size: http://jsbin.com/omacox/63

Screenshot of centered in FF 11/Win: http://j.mp/HOR1IN

This is caused by white space between display: inline-block elements. The current button group CSS uses a -5px right margin on all but the last control in the group to try and overcome this, but it doesn't seem to work in FF.

My above-linked fix instead sets the font size of the control group to 0 and then resets it for the buttons within the group. It also switches to pixels for the bottom margin of the control group, since 0.5em at a font-size of 0 = no margin. The -5px right margin on buttons is still necessary to maintain the tight spacing.

It's kind of an ugly work-around, but it does resolve the spacing issue. I'd just get rid of the white space between the links in the HTML and be done with it, but that would make them all blur together into one word on non-jQM supporting browsers.

@toddparker

@wilto - this seems to still be a problem, even on other platforms. Seems like the line is doubled up in a lot of horizontal situations.

@Wilto Wilto closed this in 6389294
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.