Skip to main content

Search and Top Navigation

#7996 closed bug (fixed)

Opened January 07, 2012 05:20PM UTC

Closed November 30, 2012 02:39AM UTC

Last modified November 30, 2012 02:39AM UTC

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:

As can be seen directly from the 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.

Attachments (0)
Change History (21)

Changed January 10, 2012 02:16AM UTC by tj.vantoll comment:1

It's more evident when you crank up the base font size -

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.

Changed January 17, 2012 01:55AM UTC by tj.vantoll comment:2

I didn't see any adverse effects from removing the line-height from that rule. I submitted a pull request to remove it -

Changed March 13, 2012 01:47PM UTC by scottgonzalez comment:3

#8185 is a duplicate of this ticket.

Changed March 23, 2012 01:20PM UTC by scottgonzalez comment:4

#8215 is a duplicate of this ticket.

Changed April 03, 2012 07:15PM UTC by scottgonzalez comment:5

status: newopen
summary: Submit button height inconsistent with other buttonsButton: 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.

Changed April 03, 2012 07:16PM UTC by scottgonzalez comment:6

#8232 is a duplicate of this ticket.

Changed April 08, 2012 05:26AM UTC by zoggy comment:7

there is known issues with line-height,

mozilla bug entry @

also side note, current href buttons are messed up in jquery in firefox/ie:

Changed April 09, 2012 01:34AM UTC by tj.vantoll comment:8

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.

Changed April 09, 2012 11:48AM UTC by scottgonzalez comment:9

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

Changed April 09, 2012 03:59PM UTC by tj.vantoll comment:10

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

Changed April 09, 2012 04:06PM UTC by scottgonzalez comment:11

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

Changed August 29, 2012 10:38PM UTC by kwhat comment:12

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

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

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:13


Changed November 10, 2012 07:27PM UTC by mikesherov comment:14

closed this pull request in light of scott.gonzalez's comments

Changed November 27, 2012 09:45PM UTC by selfthinker comment:15

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:

Changed November 28, 2012 02:27AM UTC by scottgonzalez comment:16

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?

Changed November 28, 2012 01:33PM UTC by tj.vantoll comment:17

Replying to [comment:15 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 - The button widget is set for an API redesign in 1.11 at the moment.

Changed November 28, 2012 03:46PM UTC by mikesherov comment:18

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!

Changed November 29, 2012 07:35PM UTC by selfthinker comment:19

Great, thanks. Done in here:

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.

Changed November 30, 2012 02:39AM UTC by Anika Henke comment:20

resolution: → fixed
status: openclosed

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

Changeset: 83e2a59ace6f00b785dd6f46fd63b416d86e0cc2

Changed November 30, 2012 02:39AM UTC by mikesherov comment:21