[OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)

**Gjslick** · 30 Nov 2009 4:44 PM

Ext version tested:

Ext 3.0.3

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

IE 7 (problem occurs)
IE 8 (problem occurs with compatibility mode on)
IE 6
FF 3.5
Safari 4
Chrome 3

Operating System:

WinXP Pro SP 2 - Behavior occurs on IE7
WinXP Pro SP 3 - Behavior occurs on IE8 in compatibility mode

Description:

When a framed grid panel is sized by a layout, the bottom toolbar is rendered near the top until it is mouseover'd on IE7. On the mouseover of a button on the toolbar, it pops back down to its correct position. I have seen this happen on both IE6 and IE7, but the test case below only seems to exhibit the behavior on IE7 (and IE8 in compatibility mode). However, if the grid panel is not instantiated with a frame, there is no issue.

I used a vbox layout for the example (as that is what my application uses), but the same behavior occurs with a fit layout too.

Test Case:

Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Grid Panel Test Document</title>
    
    <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext/ext-all.js"></script>
    
    <script>
        Ext.onReady( function() {
            
            new Ext.Panel( {
                renderTo: 'panelDiv',
                border: true,
                height: 400,
                width: 500,
                
                // Main Panel's Layout to size the Grid
                layout: 'vbox',
                layoutConfig: {
                    align: 'stretch'
                },
                
                items: [
                    {
                        flex: 1,
                        width: 300,
                        xtype: 'grid',
                        
                        frame: true,
                        bbar: [
                            { text: "Test Button" }
                        ],
                        
                        store: new Ext.data.JsonStore( {
                            fields: [ 'field1', 'field2' ],
                            data: [
                                { field1: "test1", field2: "test2" },
                                { field1: "test3", field2: "test4" }
                            ]
                        } ),
                        
                        columns: [
                            { header: "Field 1", dataIndex: 'field1' },
                            { header: "Field 2", dataIndex: 'field2' }
                        ]
                    }
                ]
            } );
            
        } );
        
    </script>
</head>

<body>
    <div id="panelDiv"></div>
</body>
</html>

Steps to reproduce the problem:

Open in IE7 or IE8 with compatibility mode on. Initial rendering has the toolbar near the top.
When you mouseover the "Test Button", the toolbar snaps into its correct position.

Screenshot or Video:

attached

Debugging already done:

none

Possible fix:

not provided

Note: The first thumbnail is the initial rendering, before the button on the toolbar has been mouseover'd. The second is after the button on the toolbar has been mouseover'd.

**Condor** · 1 Dec 2009 12:15 AM

This happens because VBoxLayout uses position:absolute and the bbar in IE7 is specifically set to position:relative.

You can work around the problem by using:

Code:

.ext-ie7 .x-grid-panel .x-panel-bbar {
	position: static;
}
.ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar {
	position: static;
}

**Gjslick** · 1 Dec 2009 1:11 PM

Hey, thanks for this workaround Condor. Helps for the time being! This should definitely be patched in the next version though.

**aconran** · 8 Dec 2009 5:21 PM

You said you were able to reproduce this somewhere else in IE6? Could you provide us with an example?

Scoping the workaround to only framed panels should prevent it from affecting panels in other places which may need the workaround....

Try the following:

Code:

.ext-ie7 .x-grid-panel .x-panel-mc .x-panel-bbar {
    position: static;
}

This fixes the issue in IE7 under quirks mode immediately. When using a strict doctype, you will see the bottombar start up at the top for a brief second and then snap to the bottom (without user interaction).

**Gjslick** · 8 Dec 2009 7:00 PM

Hey Aaron, thanks for your reply.

I just checked the place where I saw the problem happen in IE6, but it seems to be fixed now with 3.0.3. I had originally seen it happen with 3.0, and figured it probably was still an issue relating to this very same problem with IE7, but it's all good now. The toolbar starts at the top, but jumps down automatically after a second. So no IE6 issue after all. Sorry btw, wouldn't have added it to the bug report, but at the time I wrote it, I wasn't at home where I could log onto my desktop's IE6 VM and check.

Anyway, thanks for the new workaround.

Greg

**Condor** · 8 Dec 2009 11:45 PM

The problem would also be solved when this patch is included in Ext 3.1.

**Animal** · 9 Dec 2009 12:09 AM

That is in the latest rev.

**utaladriz** · 25 Feb 2010 3:30 PM

In ExtJS 3.1.1 with IE7 you must use

.ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar {
position: static;
}

.ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar .x-tbar-page-number {
position: static;
}

**frew** · 12 Jul 2011 1:27 PM

We have a related issue in Ext 3.4 (!!!) where tbar's fail to render at all. The posted CSS fixes it if you use tbar instead of bbar.

Why isn't this closed yet? It's a 2 year old issue...

[OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)

Thread Tools

Search Thread

Display

[OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)

[OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)

Tool Bar Page number fix

Tool Bar Page number fix