#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

Attachments (0)

Change History (13)

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

http://jsbin.com/akexiy/2

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   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 Table</label> \ <input type="checkbox" id="check5" /><label for="check5">Fixture Matrix</label> \ <input type="checkbox" id="check6" /><label for="check6">Player 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   for the spaces.

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. \ \ <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 Table</label> \ <input type="checkbox" id="check5" /><label for="check5">Fixture Matrix</label> \ <input type="checkbox" id="check6" /><label for="check6">Player 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   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.0 → 1.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:	new → 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/

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

status:	pending → new

Tested in IE8. Confirm it is now fixed.

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

milestone:	1.11.0 → 1.9.0
resolution:	→ fixed
status:	new → closed

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:	closed → 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.

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

owner:	PutKettleOn → tj.vantoll
status:	reopened → 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.

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

.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:	assigned → open

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

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

Confirmed fixed with the button rewrite.

Search and Top Navigation