TabPanel Tabs Rendering Issue on load

[dvalotia]

Overlapping Tabs.PNGTabs.PNG

Hello,

I'm currently facing an issue with the Tabs rendering in a tabpanel with Ext JS 6. Experiencing this issue in chrome but not IE.
When the page first loads, the 3 tabs in the attached image are overlapping.
However, if any of the tab is clicked, or the page is resized, then they render themselves correctly with appropriate spacing between the tabs.
From my knowledge, the css is being recomputed on resizing the window, as a result of which the tabs layout properly.

Please advise me on this, whether its an extjs 6 bug or not. We are currently migrating from ext 4 to ext 6, and the tabs work perfectly fine in the ext 4 version.

Thanks,
Dhaval
AVP - Developer, Tradeweb

[bjdurham85]

Hi--


Can you provide a test case demonstrating the issue? If you can post your code here or (even better) create a Fiddle, I'll be happy to test this along with you.


Thanks!
Bryan

[dvalotia]

Hi,

The root cause of the issue was due to the video icons in the tab that were being added dynamically. As a result of which the initial css calculations for the tab width maybe off by a bit, causing the tabs to overlap.

Fixing this bug by adding a minTabWidth property to the tabPanel.

[ss20]

Hi,
This is issue with OpenSans fonts loading.
Quick fix is preloading required fonts.

In my case I put code below in the Ext.beforeLoad function in index.php
Note: My Ext.manifest is object (not String like 'triton')

/**
 * @bug triton-theme: Layout is broken on *first* page load without cache. After F5 all looks fine
 * @fix Preload 'Open Sans' fonts
 */
if(Ext.manifest.theme === 'theme-triton')
{
    ['OpenSans-Regular', 'OpenSans-Bold', 'OpenSans-Light'].forEach(function(font)
    {
        var link = document.createElement('link');
        link.rel = 'preload';
        link.href = Ext.manifest.resources.path + '/fonts/' + font + '.ttf';
        link.as = 'font';
        link.crossOrigin = '';
        document.head.appendChild(link);
    });
}