You found a bug! We've classified it as EXTJSIV-6680 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. 28 Jun 2012 2:20 AM #1
    Daniil
    Daniil is offline
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    749
    Vote Rating
    68
    Daniil is just really nice Daniil is just really nice Daniil is just really nice Daniil is just really nice
      0  

    Default [4.1.1 rc2] Accordion + GridPanel layout issue: undesired scrollbar appears

    [4.1.1 rc2] Accordion + GridPanel layout issue: undesired scrollbar appears


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • Chrome 19
    • FF 13
    • IE9
    Description:
    • An undesired horizontal GridPanel scrollbar appears when that GridPanel is defined within the item of Accordion. Please run the sample or just look at the screenshot. Without the According the GridPanel is rendered without the scrollbar.
    Steps to reproduce the problem:
    • Just run the sample
    The result that was expected:
    • No scrollbars for the GridPanel
    The result that occurs instead:
    • A horizontal scrollbar appears.
    Test Case:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Accordion GridPanel Bug</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.panel.Panel", {
                renderTo: Ext.getBody(),
                height: 400,                
                width: 400,
                layout: "accordion", // if comment that out, the scrollbar disappears.
                items: [{
                    title: "Accordion 1",
                    collapsed: true
                }, {
                    title: "Accordion  2",
                    collapsed: false,
                    items: [{
                        xtype: "grid",
                        height: 300,
                        width: 300,
                        columns: {
                            items: [{
                                flex: 1,
                                text: "Column 1"
                            }]
                        }
                    }]
                }]                
            });
        });
    </script>
</head>
<body>

</body>
</html>


    HELPFUL INFORMATION

    Screenshot:

    1.JPG
    Reply With Quote Reply With Quote
  2. 3 Jul 2012 1:51 PM #2
    mono blaine
    mono blaine is offline
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    7
    mono blaine will become famous soon enough
      0  

    Default


    Temporary fix (with ugly side effects):

    Code:
    .x-accordion-body .x-grid-view.x-grid-view-default {
	overflow-x: hidden !important;
}
    Reply With Quote Reply With Quote