[CLOSED] Chrome renders Panels inconsistently (and wrong sometimes)

[emilschutte]

Have you tried explicitly emptying the cache (CTRL+SHIFT+DEL)?

[Mjollnir26]

Does the following work?

I removed the extend because i remember i had problems with extending an viewport once. Never
managed to get that working. All other Ext.extends work great tough.

Also i removed some unneccessary xtypes etc.

Oh and the renderTo and show stuff was kicked out too you don't need that in a Viewport

Ext.BLANK_IMAGE_URL = '/Content/ext/images/default/s.gif';

Ext.onReady(function()
{
   var vp = new Ext.Viewport
   ({
        layout:'border',
        items:
        [
            {
                region: 'north',
                tbar: 
                [
                    {
                        text:'Settings'
                    }
                ]
            },
            {
                region: 'center',
                collapseMode: 'standard',
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{title: 'tab1' }]
            },
            {
                title: 'Sidebar',
                region: 'west',
                width: 100,
                collapsible: true,
                autoWidth: true
            }
        ]
    });       
});

[KallDrexx]

Nope, I copied and pasted your code, after 2 refreshes Chrome rendered this:


Notice the tab panel on the very far right as well. Also, I still get the white space shown in my previous post on some refreshes.

[Mjollnir26]

Hmmm i am on 3.2.2 here tested in FF 3.6._current and Chrome 7.0 on Windows 7 Ultimate.

To test i simple replaced the onReady call of my real app with the code from my post above.
And i can not for the Life of me replicate the issue, in no Browser.
I hit the Refresh button in Chrome with and without Ctrl for like 20 times.

Your best bet would probably be to try without your custom CSS you might have and quadruple checking if no Extensions / overrides / custom components are interfering.

[KallDrexx]

Aha!

At first I was disappointed in your reply, because I'm not using any custom CSS. But then it got me thinking and I figured it out!

The issue all along was that my HTML file had the ext-all.css stylesheet <link> tag AFTER all the <script> tags. It turns out that the Ext stylesheet was being loaded AFTER the javascript was processed. That explains the inconsistency as well, and it seems to not happen anymore.

Sorry for the stupidity all, and thanks for all the help!

[Mjollnir26]

Glad you Figured it out. Don't get scared by the starting issues. If you manage to work through those youll Be rewarded with gerat Productivity once you learn how to Fully leverage the Power of the framework.