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

**Rocco** · 16 Apr 2013 7:25 PM

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:

Hide an element either by setting display to 'none' or with Ext.Element.hide (with visibility mode set to DISPLAY).
Get the element's width using Ext.Element.getWidth.
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;
        }
    });

**mitchellsimoens** · 17 Apr 2013 4:33 AM

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.

**Rocco** · 17 Apr 2013 7:41 AM

Originally Posted by mitchellsimoens

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/

**Rocco** · 25 Apr 2013 2:47 PM

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/

**ttbgwt** · 25 Apr 2013 4:12 PM

I see the difference...

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

Thread Tools

Search Thread

Display

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