#7996 closed bug (fixed)
Button: Inconsistent styling based on markup
Reported by: | scoulibaly | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.10.0 |
Component: | ui.button | Version: | 1.8.16 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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.
Change History (21)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
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.
comment:5 Changed 11 years ago by
Status: | new → open |
---|---|
Summary: | Submit button height inconsistent with other buttons → Button: Inconsistent styling based on markup |
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.
comment:7 Changed 11 years ago by
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
comment:8 Changed 11 years ago by
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.
comment:9 Changed 11 years ago by
comment:10 Changed 11 years ago by
@scott.gonzalez You are correct. It looks like the alignment issues @zoggy was referring to were fixed with 99fd851. Thanks.
comment:11 Changed 11 years ago by
@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.
comment:12 Changed 11 years ago by
Hack to work around the problem. Not tested with icons.
.ui-button .ui-button-text, input.ui-button { line-height: 1.3em !important; }
comment:13 Changed 11 years ago by
Milestone: | 1.9.0 → 1.11.0 |
---|
comment:14 Changed 11 years ago by
closed this pull request in light of scott.gonzalez's comments https://github.com/jquery/jquery-ui/pull/576
comment:15 follow-up: 17 Changed 11 years ago by
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
comment:16 Changed 11 years ago by
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?
comment:17 Changed 11 years ago by
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.
comment:18 Changed 11 years ago by
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!
comment:19 Changed 11 years ago by
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.
comment:20 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
Button: fixed inconsistent button styling in most browsers. Fixes #7996 - Button: Inconsistent styling based on markup
Changeset: 83e2a59ace6f00b785dd6f46fd63b416d86e0cc2
comment:21 Changed 11 years ago by
Milestone: | 1.11.0 → 1.10.0 |
---|
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.