Results 1 to 4 of 4

Thread: TabPanel Tabs Rendering Issue on load

  1. #1
    Sencha User
    Join Date
    Feb 2017

    Default TabPanel Tabs Rendering Issue on load

    Overlapping Tabs.PNGTabs.PNG


    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.

    AVP - Developer, Tradeweb

  2. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014



    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.


  3. #3
    Sencha User
    Join Date
    Feb 2017



    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.

  4. #4
    Sencha User
    Join Date
    Sep 2012


    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';
   = 'font';
            link.crossOrigin = '';

Similar Threads

  1. TabPanel tabs rendering issue
    By skizzato in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 21 May 2012, 12:41 PM
  2. Rendering data in multiple tabs on render of tabpanel
    By raghavan0208 in forum Ext: Discussion
    Replies: 0
    Last Post: 6 May 2012, 11:59 PM
  3. [Solved] DataView in Tabs --> rendering issue
    By lorezyra in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 6 Dec 2009, 11:10 PM
  4. TabPanel - load new tabs in background with load-indicator in title?
    By codeslinger in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 29 Dec 2008, 1:58 PM
  5. lazy instantiation (not rendering) of tabpanel items (tabs)
    By vmihaylov in forum Sencha Ext JS Q&A
    Replies: 4
    Last Post: 31 Oct 2008, 7:33 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts