Hybrid View

    You found a bug! We've classified it as EXTJSIII-73 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default Accordion/ treepanel autoscroll issue in IE10, IE9 (& IE8 Compatability)

    Accordion/ treepanel autoscroll issue in IE10, IE9 (& IE8 Compatability)


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 3.4.0
    Browser versions tested against:
    • Firefox 13.0.1
    • Chrome 20.0.1132
    • IE 9.0.8112
    Description: IE9
    • In IE9, Mouseover of the tree panel nodes cause the accordion panel to unexpectedly grow vertically.
    • Eventually the lower accordion panels disappear off the screen
    • This does not occur in Chrome/ Firefox
    Description: IE9 (using IE8 Compatibility)
    • IE8 compatibility mode results in an an unexpected vertical scroll bar
    Steps to reproduce the problem:
    • Run the example code below in IE9
    • Mouseover the tree panel node
    • Observe the height of the accordion panel as it grows in response to mouseover

    The result that was expected:
    • The accordion panel height should not change
    The result that occurs instead:
    • The accordion panel height unexpectedly grows
    • Eventually the lower accordion panels disappear off the screen
    • An unexpected vertical scroll bar can also be seen in IE8 compatability mode (see attached image)

    Test Case:

    Code:
       <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
    
    </head>
    <body>
    
    
    <script type="text/javascript">
    
    Ext.onReady(function() {
    
        var treePanel1 = new Ext.tree.TreePanel({
            layout: 'fit',
            rootVisible : false,
            autoScroll : true,
            title:'Title 1',
            root : {
                children : [{
                    text : 'test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                },{
                    text : 'test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                }]
            }
        })
        var treePanel2 = new Ext.tree.TreePanel({
            layout: 'fit',
            rootVisible : false,
            autoScroll : true,
            title:'Title 2',
            root : {
                children : [{
                    text : 'test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                },{
                    text : 'test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                }]
            }
        })
    
        var accordionLayout = new Ext.Panel({
                    layoutConfig : {
                        fill : false
                    },
                    layout : 'accordion',
                    items : [treePanel1,treePanel2]
                });
    
        
    
        var borderLayout = new Ext.Panel({
                    layout : 'border',
                    items : [{
                                layout : 'fit',
                                width : 250,
                                region : 'west',
                                items : [accordionLayout]
                            }, {
                                region : 'center',
                                items : [{
                                            html : 'test'
                                        }]
                            }]
                });
    
        var win = new Ext.Viewport({
                    title : 'Layout Window',
                    layout : 'fit',
                    items : [borderLayout]
                });
    
        win.show(this);
    });
    
    
    </script>
    
    </body>
    </html>


    HELPFUL INFORMATION


    Screenshot or Video:
    • Attached image: AccordionPanelScrollBarsIE9.jpg
    • Image displays Chrome, Firefox, IE9, IE9 (with IE8 compatibility)
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7 (32)
    Attached Images
    Last edited by dee1; 17 Apr 2013 at 5:11 PM. Reason: Additional probs for IE10

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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


    Thanks for the report.
    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
    Join Date
    Dec 2008
    Posts
    1
    Vote Rating
    0
    smartgk is on a distinguished road

      0  

    Default Similar issue on select box also

    Similar issue on select box also


    I have a selectbox with horizontal scroll. On hover (mouse over) of the selectable item list, the height is growing by one row height, on every onmouseenter. This is reproducible at all times on IE 9.0.8112.16421

    I believe this would be similar issue. How would I get notified on any updates for this?

    Thanks

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default 3.4.1.1 Release

    3.4.1.1 Release


    Thanks for the 3.4.1.1 IE10 release - unfortunately its introduced a new bug for IE10.

    For IE9:
    3.4.1.1 doesn't solve this bug (same as above).

    For IE10:
    The bug (discussed above) didn't happen with 3.4.0 but now with 3.4.1.1 a new bug seems to be introduced with a 3.4.1.1 vertical scroll bar that shouldn't be there.

    If anyone can give some direction on where to start fixing these bugs, your help would be very welcomed.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default


    Any chance this might get looked at for 3.4.2?

    Resorting to IE8 X-UA-Compatible & 3.4.0 unfortunately doesn't appear to work for IFrames in IE when the parent window doesnt have X-UA-Compatible.

    If there's any alternative suggestions on how we can resolve this, please advise.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default


    After a lot of trial and error - it appears the problem relates to the use of CSS & overflow: hidden;

    With the Panel baseCls & overCls set to a CSS class with "overflow: hidden" the bug is resolved but a new problem introduced with the scroll bars no longer working - which is not an option due to the un-useability issues of no scroll bars.

    However, it seems a work around is if the Accordion layout is changed to "fill : true"
    Unfortunately our design requirements are "fill: false" for accordions.

    Hence it seems to be an issue with IE9 and the use of accordion with layouts set to "fill: false"

    I can appreciate ExtJS 3 not being a priority these days but, any suggestions on what can be done to address this would be welcomed as this has been a bug for a fair while.