Opened 6 years ago

Closed 2 years ago

#7583 closed bug (fixed)

Buttonset: incorrect button width/alignment in IE8

Reported by: PutKettleOn Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.button Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

Appears in IE8. I tested IE6, IE9, FF, Chrome and they were all ok. Only appears when you have spaces in the button text and within a float. The width of the button seems to be set by the first word of the text rather than the whole text. Workaround: use   for the spaces.

Change History (13)

comment:2 Changed 6 years ago by Scott González

Description: modified (diff)

comment:3 Changed 6 years ago by bmorearty

@PutKettleOn, Thank you for the suggested workaround for this bug. Confirmed that it works. You saved my bacon.

comment:4 Changed 5 years ago by Scott González


comment:5 Changed 5 years ago by bchiasson

Owner: set to PutKettleOn
Status: newpending

I was unable to reproduce the issue in IE8 Browser Mode within IE9 using the jsbin above. If you are still experiencing the issue, please provide more information so that we can triage.

Last edited 5 years ago by bchiasson (previous) (diff)

comment:6 Changed 5 years ago by PutKettleOn

Status: pendingnew

Tested in IE8. Confirm it is now fixed.

comment:7 Changed 5 years ago by Scott González

Resolution: fixed
Status: newclosed

comment:8 Changed 5 years ago by stew

Still seems broken on 1.10.1

comment:9 Changed 5 years ago by tj.vantoll

Milestone: 1.9.0
Resolution: fixed
Status: closedreopened

This is indeed still broken:

The test case did not include the floating mentioned by the OP. If you add it that case breaks as well:

I confirmed that this only occurs in IE8. Looks fine in IE7 & IE9.

comment:10 Changed 5 years ago by tj.vantoll

Owner: changed from PutKettleOn to tj.vantoll
Status: reopenedassigned

Giving the buttonset an explicit width works around the problem as well. The problem seems to be related to IE8 reporting a bad width under these circumstances. I can look into this one.

comment:11 Changed 5 years ago by tj.vantoll

Reduced this down a little:

Removing this rule causes the white space to be respected again but I have no idea why:

.ui-buttonset .ui-button {
    margin-right: -.3em;

Adding white-space: nowrap to .ui-button also fixes it. It's not an option for the library itself but it would make a good workaround if you're running into this problem.

comment:12 Changed 4 years ago by Jörn Zaefferer

Milestone: none
Owner: tj.vantoll deleted
Status: assignedopen

comment:13 Changed 2 years ago by Scott González

Milestone: none1.12.0
Resolution: fixed
Status: openclosed

Confirmed fixed with the button rewrite.

Note: See TracTickets for help on using tickets.