-
13 Apr 2007 9:40 AM #1
Ext.Button.setText() sizing failure in IE7
Ext.Button.setText() sizing failure in IE7
This is pretty minor, but it gave me some annoyance.
Code: Ext 1.0 beta 2
When creating an instance of Ext.Button or one of its subclasses with the following conditions being true:
- The constructor option 'text' is omitted or set to an empty value
- The constructor option 'cls' is set to 'x-btn-text-icon'
... the width of the button will not be changed to accommodate a new text value passed to it through the setText method when running in IE7. This problem does not occur in Firefox or Safari. IE6's behavior is unknown.
A simple test case:
The sizing failure does not occur when the manner of specification of the class name is changed to the following:HTML Code:<div id="button"></div> <script type="text/javascript"> var btn = new Ext.Button('button', {cls: 'x-btn-text-icon'}); btn.setText('Button text'); </script>
HTML Code:<div id="button"></div> <script type="text/javascript"> var btn = new Ext.Button('button'); btn.getEl().addClass('x-btn-text-icon'); btn.setText('Button text'); </script>
-
13 Apr 2007 9:59 AM #2
Does this behavior change based on whether the doctype is strict or not? There are a couple checks for IE7 and strict and how autoWidth is called.
Tim Ryan
Read BEFORE posting a question / BEFORE posting a Bug
Use Google to Search - API / Forum
API Doc (4.x | 3.x | 2.x | 1.x) / FAQ / 1.x->2.x Migration Guide / 2.x->3.x Migration Guide
-
13 Apr 2007 11:35 AM #3
Changing between the following document types causes no difference:
- XHTML 1 Strict
- XHTML 1 Transitional
- HTML 4 Strict
- HTML 4 Transitional
I noted in these tests that IE7 was running in strict mode. Rerunning the tests with IE7 forced into quirks mode causes the resizing to mostly work properly. The end result is an appropriately sized button, but for a brief moment it is wider than it needs to be before resizing back down.
The following example illuminates this new resizing behavior. While the alert box is open the button remains in its extra-wide state.
I forced quirks mode by inserting a comment before the DOCTYPE.HTML Code:<div id="button"></div> <script type="text/javascript"> var btn = new Ext.Button('button', {cls: 'x-btn-text-icon'}); btn.setText('Button text'); alert(document.compatMode); </script>


Reply With Quote