Ticket #7996 (closed bug: fixed)

Opened 3 years ago

Last modified 23 months ago

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:
Blocking: Blocked by:

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

comment:1 Changed 3 years ago by 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.

comment:2 Changed 3 years ago by 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.

comment:3 Changed 3 years ago by scott.gonzalez

#8185 is a duplicate of this ticket.

comment:4 Changed 3 years ago by scott.gonzalez

#8215 is a duplicate of this ticket.

comment:5 Changed 3 years ago by scott.gonzalez

  • Status changed from new to open
  • Summary changed from Submit button height inconsistent with other buttons to 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:6 Changed 3 years ago by scott.gonzalez

#8232 is a duplicate of this ticket.

comment:7 Changed 3 years ago by 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

comment:8 Changed 3 years ago by 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.

comment:9 Changed 3 years ago by scott.gonzalez

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

comment:10 Changed 3 years ago by tj.vantoll

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

comment:11 Changed 3 years ago by scott.gonzalez

@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 2 years ago by kwhat

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 2 years ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.11.0

comment:14 Changed 2 years ago by mikesherov

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 23 months ago by 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

comment:16 Changed 23 months ago by scott.gonzalez

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 in reply to: ↑ 15 Changed 23 months ago by 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.

comment:18 Changed 23 months ago by 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!

comment:19 Changed 23 months ago by 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.

comment:20 Changed 23 months ago by Anika Henke

  • Status changed from open to closed
  • Resolution set to fixed

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

Changeset: 83e2a59ace6f00b785dd6f46fd63b416d86e0cc2

comment:21 Changed 23 months ago by mikesherov

  • Milestone changed from 1.11.0 to 1.10.0
Note: See TracTickets for help on using tickets.