Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    43
    Vote Rating
    0
    bloudon is on a distinguished road

      0  

    Default 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:

    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>
    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');
        btn.getEl().addClass('x-btn-text-icon');
        btn.setText('Button text');
    </script>

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    43
    Vote Rating
    0
    bloudon is on a distinguished road

      0  

    Default


    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.

    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>
    I forced quirks mode by inserting a comment before the DOCTYPE.

Thread Participants: 1