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

[ezyang]

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.

[tj.vantoll]

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

[ezyang]

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

[tj.vantoll]

#9398 is a duplicate of this ticket.

[tj.vantoll]

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

[kbwood]

This CSS fixes the example given above:

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

[tj.vantoll]

Replying to 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?

[tj.vantoll]

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.

[Scott González]

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