PDA

View Full Version : [INFOREQ] [4.0.6] Button text overflow issue in IE 8



slemmon
19 Sep 2011, 7:58 AM
REQUIRED INFORMATION


Ext version tested:


Ext 4.0.6



Browser versions tested against:


IE8.0.6001
FF5.0 (firebug 1.8.1 installed)



DOCTYPE tested against:


strict



Description:


Setting the text in a button renders differently in FF and IE8. I have a toggle button that has no text and does have an icon. When I click the button I add the text: 0.00 and that renders up ok in IE and FF both. Updating the text afterwards to 1234.12 ft, 4561.45 ft, 12.15 mi, etc will render fine in FF, but the distance (ft, mi, etc) gets chopped almost completely in IE.



Steps to reproduce the problem:


Drop a button on the page with an icon, but no text. Update the button text using setText to ‘0.00’. Update the button text to ‘1234.12 ft’.



The result that was expected:


Updating the text to ‘1234.12 ft’ should display the icon, and the full text.



The result that occurs instead:


The icon is displayed and part of the text is displayed: ‘1234.12 f’ with no margin on the right like you see in FF.



Test Case:



var measure = Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
enableToggle: true,
iconCls: 'measure'
});

var update = Ext.create('Ext.Button', {
text: 'Update 1',
renderTo: Ext.getBody(),
handler: function () {
measure.setText('0.00')
}
});

var update2 = Ext.create('Ext.Button', {
text: 'Update 2',
renderTo: Ext.getBody(),
handler: function () {
measure.setText('1234.12 ft')
}
});




HELPFUL INFORMATION


Screenshot or Video:


attached



Debugging already done:


none



Possible fix:


not provided



Additional CSS used:


Default ext-all.css
custom css : background image for iconCls



Operating System:


WinXP Pro



FF 5
28140

IE 8
28141

evant
20 Sep 2011, 12:00 AM
I wasn't able to reproduce this behaviour in IE8 strict mode in 4.0.6 using your test case. Please post more info.