Results 1 to 5 of 5

Thread: Ext JS 3.4.4.1 - IE10 - Element.getWidth returns non-zero value for hidden elements

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User Rocco's Avatar
    Join Date
    Nov 2007
    Location
    Phoenix, AZ
    Posts
    31
    Vote Rating
    0
      0  

    Default Ext JS 3.4.4.1 - IE10 - Element.getWidth returns non-zero value for hidden elements

    EDIT: Just realized I inadvertently titled this post with an invalid version number...should be "Ext JS 3.4.1.1".

    Ext version tested:

    • Ext 3.4.1.1
    Browser versions tested against:
    • Internet Explorer 10
    Operating System:
    • Windows 7
    • Windows 8
    Description:
    • Ext.Element::getWidth method returns a non-zero value after hiding elements using display:none in IE10. This is creating a problem with TriggerFields whose hideTrigger property is set to true since space is still being allocated for the trigger.
    Test Case:

    http://jsfiddle.net/RFgRY/1/

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>IE10 Test</title>
        <script type="text/javascript" src="/js/ext-js-3.4.1/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="/js/ext-js-3.4.1/ext-all-debug-w-comments.js"></script>
        <link rel="stylesheet" type="text/css" href="/js/ext-js-3.4.1/resources/css/ext-all-notheme.css">
        <link rel="stylesheet" type="text/css" href="/js/ext-js-3.4.1/resources/css/xtheme-gray.css" />
        <script type="text/javascript">
          Ext.onReady(function(){
            var fld = Ext.get('test-field'),
              w1 = fld.getWidth(),
              w2;
    
            fld.setVisibilityMode(Ext.Element.DISPLAY).hide();
    
            w2 = fld.getWidth();
    
            // visible width: 302px; hidden width: 300px
            Ext.get('msg').update(['visible width: ', w1, 'px; hidden width: ', w2, 'px'].join(''));
          });
        </script>
    </head>
    <body style="padding:25px;">
      <input id="test-field" type="text" style="width: 300px;" />
      <span id="msg"></span>
    </body>
    </html>
    Steps to reproduce the problem:
    1. Hide an element either by setting display to 'none' or with Ext.Element.hide (with visibility mode set to DISPLAY).
    2. Get the element's width using Ext.Element.getWidth.
    3. Note that the width is greater than zero.
    Possible Fix:
    Update or override Ext.Element.getWidth as follows:
    Code:
    Ext.override(Ext.Element, {
            getWidth: function (contentWidth) {
                var me = this,
                    dom = me.dom,
                    hidden = (Ext.isIE9m || Ext.isIE10) && me.isStyle('display', 'none'),
                    w = Math.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
                w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
                return w < 0 ? 0 : w;
            }
        });
    Last edited by Rocco; 25 Apr 2013 at 2:48 PM. Reason: fixed formatting; updated jsfiddle

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Using Chrome, I get 0 for getWidth() just like you are reporting against IE10.

    Looking at the dom element, offsetWidth, clientWidth, width. There is nothing that says it has a width because of the display: none; If you used Ext.Element.VISIBILITY then it will still take up space but display will not take up space.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Rocco's Avatar
    Join Date
    Nov 2007
    Location
    Phoenix, AZ
    Posts
    31
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Using Chrome, I get 0 for getWidth() just like you are reporting against IE10.

    Looking at the dom element, offsetWidth, clientWidth, width. There is nothing that says it has a width because of the display: none; If you used Ext.Element.VISIBILITY then it will still take up space but display will not take up space.
    Mitchell, thanks for taking a look.

    Perhaps my bug report wasn't clear: the issue is with Internet Explorer 10, not Chrome (or any other browser that I tested with, for that matter).

    Chrome returns 0 for the dom element's width, clientWidth, and offsetWidth properties when display is "none", as I would expect. However, using Internet Explorer 10, I'm getting a value of 0 for dom.width, 300 for dom.clientWidth, and 0 for dom.offsetWidth. The fact that dom.clientWidth is returning 300 is causing Element.getWidth() to return 300 instead of zero.

    Have a look at this in IE10 to see what I mean: http://jsfiddle.net/RFgRY/1/

  4. #4
    Sencha User Rocco's Avatar
    Join Date
    Nov 2007
    Location
    Phoenix, AZ
    Posts
    31
    Vote Rating
    0
      0  

    Default

    Is no one else experiencing this problem?

    A "real-world" example of this problem can be seen when using a combo with hideTrigger set to false in a toolbar. In IE10 you will see that space is still allocated for the hidden trigger, so tb item spacing is incorrect. Compare the results of the following example in Chrome and IE10.

    http://jsfiddle.net/9Ad9n/3/

  5. #5
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    432
    Vote Rating
    22
      0  

    Default

    I see the difference...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •