Opened 6 years ago

Closed 16 months 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 scottgonzalez)

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 scottgonzalez

  • Description modified (diff)

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

  • Milestone changed from 1.9.0 to 1.11.0

comment:5 Changed 4 years ago by bchiasson

  • Owner set to PutKettleOn
  • Status changed from new to pending

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.

http://jsfiddle.net/bchiasson/kaYpX/4/

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

comment:6 Changed 4 years ago by PutKettleOn

  • Status changed from pending to new

Tested in IE8. Confirm it is now fixed.

comment:7 Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.11.0 to 1.9.0
  • Resolution set to fixed
  • Status changed from new to closed

comment:8 Changed 4 years ago by stew

Still seems broken on 1.10.1

comment:9 Changed 4 years ago by tj.vantoll

  • Milestone 1.9.0 deleted
  • Resolution fixed deleted
  • Status changed from closed to reopened

This is indeed still broken: http://jsbin.com/akexiy/12.

The test case http://jsfiddle.net/bchiasson/kaYpX/4/ did not include the floating mentioned by the OP. If you add it that case breaks as well: http://jsfiddle.net/tj_vantoll/qz6nq/.

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

comment:10 Changed 4 years ago by tj.vantoll

  • Owner changed from PutKettleOn to tj.vantoll
  • Status changed from reopened to assigned

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 4 years ago by tj.vantoll

Reduced this down a little: http://jsbin.com/ewanup/4/edit.

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 3 years ago by jzaefferer

  • Milestone set to none
  • Owner tj.vantoll deleted
  • Status changed from assigned to open

comment:13 Changed 16 months ago by scottgonzalez

  • Milestone changed from none to 1.12.0
  • Resolution set to fixed
  • Status changed from open to closed

Confirmed fixed with the button rewrite.

Note: See TracTickets for help on using tickets.