Button: Inconsistent styling based on markup

[scoulibaly]

As can be seen directly from the ​http://jqueryui.com/demos/button/ page, the height of a submit button is different from other types of buttons. (I know about the "if you link to a complex page or a full web site, we will not accept the ticket.")

Any workaround welcome while a fix is done !

This can be reproduced on Chrome 16, IE 6, IE 9.

[tj.vantoll]

It's more evident when you crank up the base font size - ​http://jsfiddle.net/fLdxh/3/.

Removing the line-height rule from the .ui-button .ui-button-text selector fixes the height issue. I'm not sure if there's any adverse effect from removing that rule though. If you're just looking for a temporary fix for now that should do it.

[tj.vantoll]

I didn't see any adverse effects from removing the line-height from that rule. I submitted a pull request to remove it - ​https://github.com/jquery/jquery-ui/pull/574.

[Scott González]

#8185 is a duplicate of this ticket.

[Scott González]

#8215 is a duplicate of this ticket.

[Scott González]

This ticket has generally been treated as a catch all for the various styling differences, so I'm updating the summary to be more generic.

[Scott González]

#8232 is a duplicate of this ticket.

[zoggy]

there is known issues with line-height,

​http://www.cssnewbie.com/input-button-line-height-bug/ mozilla bug entry @ ​https://bugzilla.mozilla.org/show_bug.cgi?id=349259

also side note, current href buttons are messed up in jquery in firefox/ie: ​http://jqueryui.com/demos/button/default.html

[tj.vantoll]

The issue with the anchor button alignment can be "fixed" by removing .ui-button { overflow: hidden; } from jquery.ui.button.css or by simply overriding the rule with .ui-button { overflow: visible; }. That does fix the alignment in the demo for Firefox and IE 8 - 10, but the alignment is still messed up in IE 6 & 7.

Anybody know why .ui-button would need overflow:hidden?

I can try to take a look into what's causing problems in IE6 & 7.

[Scott González]

@tj.vantoll Perhaps you're looking at 1.8.18? In 1-8-stable and master, button has overflow: visible, with a comment that says "the overflow property removes extra width in IE". See #8241 and #7911.

[tj.vantoll]

@scott.gonzalez You are correct. It looks like the alignment issues @zoggy was referring to were fixed with ​99fd851. Thanks.

[Scott González]

@tj.vantoll There's still a difference in how the elements are rendered. For example, the submit button is smaller than the button and anchor. If you look at the other tickets that are closed as duplicates, you'll see reports of other types of inconsistencies. We plan on changing the implementation in 1.10 to be more like jQuery Mobile where there's always a proxy element to solve these problems.

[kwhat]

Hack to work around the problem. Not tested with icons.

.ui-button .ui-button-text, input.ui-button {
	line-height: 1.3em !important;
}

[mikesherov]

closed this pull request in light of scott.gonzalez's comments ​https://github.com/jquery/jquery-ui/pull/576

[selfthinker]

Is there any more information on the "plan on changing the implementation in 1.10 to be more like jQuery Mobile"? Under which point on the roadmap does that belong to?

Whatever will change for that, I cannot imagine that it wouldn't require the same line-height changes as well. Form styling will always require some "special attendance".

I wouldn't recommend removing the line-height completely, because that would cause trouble with a different line-height in any container (e.g. in body) and it will look inconsistent again. Instead I would set .ui-button .ui-button-text as well as .ui-button to have line-height: normal;. That will not guarantee that it will look consistent across browsers (because "normal" is defined differently in some browsers), but it will guarantee that the three types of buttons are consistent among themselves (which I find much more important).

Apart from that, Firefox also needs border and padding reset for input.ui-button::-moz-focus-inner as well, not just the already existing button.ui-button::-moz-focus-inner.

I tested in all major Windows, Mac, Linux, Android and iOS browsers. Before those three fixes the buttons were only consistent on iOS and different in all others. After the changes the consistency is fixed everywhere, except in IE7, and in Chrome the input button is 1px too short.

As PR 576 was rejected, I won't provide another PR. But if anyone is interested, my changes are here: ​http://pastebin.com/ZR1vwVHi

[Scott González]

jQuery Mobile just uses a div and proxies everything. This lets them avoid any style inconsistencies. However, it seems like they change their mind about markup and styling every few months, so let's go ahead and just fix this now. Can you send a PR with your suggested changes?

[tj.vantoll]

Replying to selfthinker:

Is there any more information on the "plan on changing the implementation in 1.10 to be more like jQuery Mobile"? Under which point on the roadmap does that belong to?

Just fyi here's the roadmap you were asking about - ​http://wiki.jqueryui.com/w/page/12138038/Roadmap. The button widget is set for an API redesign in 1.11 at the moment.

[mikesherov]

I just wanted to mention though that despite it not being on the roadmap till 1.11, we accept bug fixes in any milestone. So go ahead and fix, selfthinker!

[selfthinker]

Great, thanks. Done in here: ​https://github.com/jquery/jquery-ui/pull/851

As mentioned before, this fixes the issues across all browsers except in IE7 (which has its own ticket anyway: #5254), and in Chrome only the input button is unfortunately still 1px too short. I could fix the latter with more radical changes, but I'd rather not risk that yet.

[Anika Henke]

Button: fixed inconsistent button styling in most browsers. Fixes #7996 - Button: Inconsistent styling based on markup

Changeset: 83e2a59ace6f00b785dd6f46fd63b416d86e0cc2