#8827 closed bug (fixed)

Opened November 18, 2012 07:26AM UTC

Closed October 28, 2015 04:34PM UTC

Button: Pixel positioning for button widget with radio buttons is incorrect

Reported by: ezyang Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.button Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:
Description

The default theme for 'button' incorrectly uses negative margins in 'em'. You can see the problem by inspecting the demo on http://jqueryui.com/button/#radio on Chrome (I'm on Version 22.0.1229.94 Ubuntu 12.10 (161065) but I imagine the problem is persistent over many versions)

The first button is not properly offset with the second button; when #1 is selected and #2 highlighted, the border is 2px wide. The second button is properly offset with the third, but its right border is covered by the third button, so it doesn't darken even when selected.

Because the borders of these buttons are measured in pixels, any negative margins should be in pixels as well. This also prevents distortions when the font size of a document is different.

Attachments (0)
Change History (9)

Changed November 19, 2012 02:22AM UTC by tj.vantoll comment:1

status: new → open
summary: Pixel positioning on default theme for button widget with radio buttons is incorrect → Button: Pixel positioning on default theme for button widget with radio buttons is incorrect

Verified. Made an example on jsFiddle so it's easier to play with - http://jsfiddle.net/tj_vantoll/9nD2v/.

Changed November 19, 2012 02:32AM UTC by ezyang comment:2

Funnily enough, it renders fine for me on the jsFiddle :-) (Also, it would be good to set the z-index of the focused element higher than the rest, so the border extends over the entire of the button and isn't clipped off by a button on the right.)

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:3

milestone: 1.10.0 → none

Changed June 25, 2013 08:37PM UTC by tj.vantoll comment:4

#9398 is a duplicate of this ticket.

Changed June 25, 2013 08:38PM UTC by tj.vantoll comment:5

summary: Button: Pixel positioning on default theme for button widget with radio buttons is incorrect → Button: Pixel positioning for button widget with radio buttons is incorrect

It's not just for the default theme. This is actually much easier to visually see with dark themes. See this test case from @Dinosaurs in #9398: http://jsfiddle.net/jakecigar/2wCFx/.

Changed June 26, 2013 01:30AM UTC by kbwood comment:6

This CSS fixes the example given above:

.ui-button.ui-state-active { z-index: 10; }

Changed June 26, 2013 02:05PM UTC by tj.vantoll comment:7

Replying to [comment:6 kbwood]:

This CSS fixes the example given above: .ui-button.ui-state-active { z-index: 10; }

I like that fix. It also needs to be applied to 

.ui-button.ui-state-hover
to cover the OP's use case, and the 
z-index
only has to be 
1
to trump the sibling buttons.

.ui-buttonset .ui-button.ui-state-active, .ui-buttonset .ui-button.ui-state-hover {
    z-index: 1;
}

Seems to work. @kbwood, would you be interested in creating a pull request for this?

Changed July 04, 2013 01:09AM UTC by tj.vantoll comment:8

Actually after taking a second look the 

z-index
does solve the border overlap, but one of the original problems... "when #1 is selected and #2 highlighted, the border is 2px wide", isn't solved by this.

I think we need to define the negative margins in pixels as the OP suggested.

Changed October 28, 2015 04:34PM UTC by scottgonzalez comment:9

milestone: none → 1.12.0
resolution: → fixed
status: open → closed

Controlgroup (the replacement for buttonset) no longer uses "overlapping" borders, so this is effectively fixed in master.