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
    Rocco is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      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
    Rocco is on a distinguished road

      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
    373
    Vote Rating
    8
    ttbgwt is on a distinguished road

      0  

    Default


    I see the difference...

Thread Participants: 2