Skip to main content

Search and Top Navigation

#7583 closed bug (fixed)

Opened July 28, 2011 09:47AM UTC

Closed October 27, 2015 02:26PM UTC

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

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.

Attachments (0)
Change History (13)

Changed July 28, 2011 09:54AM UTC by PutKettleOn comment:1

Changed July 28, 2011 10:15AM UTC by scottgonzalez comment:2

description: 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 &nbsp; for the spaces. \ \ <script> \ $(function () { \ $(".bs").buttonset(); \ }); \ </script> \ <style> \ .bs { float:left; clear:both; margin: 1em; } \ .body { margin: 2em; } \ </style> \ \ <div class="bs"> \ <input type="checkbox" id="check1" /><label for="check1">Score Table</label> \ <input type="checkbox" id="check2" /><label for="check2">Fixture Matrix</label> \ <input type="checkbox" id="check3" /><label for="check3">Player Table</label> \ </div> \ \ <div class="bs"> \ <input type="checkbox" id="check4" /><label for="check4">Score&nbsp;Table</label> \ <input type="checkbox" id="check5" /><label for="check5">Fixture&nbsp;Matrix</label> \ <input type="checkbox" id="check6" /><label for="check6">Player&nbsp;Table</label> \ </div>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 &nbsp; for the spaces.

Changed February 21, 2012 11:06PM UTC by bmorearty comment:3

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

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

milestone: 1.9.01.11.0

Changed October 15, 2012 09:19PM UTC by bchiasson comment:5

_comment0: I was unable to reproduce the issue in IE8 Browser Mode within IE9 using the jsbin above. Please provide more information so that we can triage if the problem still exists.1350336003826552
_comment1: 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.1350336353927479
owner: → 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.

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

Changed October 16, 2012 08:42AM UTC by PutKettleOn comment:6

status: pendingnew

Tested in IE8. Confirm it is now fixed.

Changed October 16, 2012 12:25PM UTC by scottgonzalez comment:7

milestone: 1.11.01.9.0
resolution: → fixed
status: newclosed

Changed April 17, 2013 02:58PM UTC by stew comment:8

Still seems broken on 1.10.1

Changed April 17, 2013 04:38PM UTC by tj.vantoll comment:9

milestone: 1.9.0
resolution: fixed
status: closedreopened

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.

Changed April 17, 2013 04:49PM UTC by tj.vantoll comment:10

owner: PutKettleOntj.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.

Changed April 20, 2013 02:11AM UTC by tj.vantoll comment:11

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.

Changed September 21, 2013 02:14PM UTC by jzaefferer comment:12

milestone: → none
owner: tj.vantoll
status: assignedopen

Changed October 27, 2015 02:26PM UTC by scottgonzalez comment:13

milestone: none1.12.0
resolution: → fixed
status: openclosed

Confirmed fixed with the button rewrite.