1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    sublime1 is on a distinguished road

      0  

    Default Unanswered: Grey Boxes and Scrollbars in the tabs

    Unanswered: Grey Boxes and Scrollbars in the tabs


    When I put certain words in the tabs then either the tab is displayed with a grey box or a scrollbar were the title is supposed to be (see below)

    Screen shot 2012-11-29 at 11.52.18 AM.png

    Tricks I've found:
    • changing the word to either be shorter or longer makes the scrollbars go away
    • changing the word to any other word (can even be the same length in some cases) will make the grey box go away
    Relevant code: (the code to render the first two tabs)
    Code:
    xtype: 'tabpanel',
    border: 0,
    activeTab: 0,
    items: [
    {
          xtype: 'panel',
          border: 0,
          activeItem: 0,
          layout: {
                  type: 'column'
          },
          title: 'General',
          items: [
               { .... }
          ]
    },
    {
          xtype: 'panel',
          border: 0,
          activeItem: 0,
          layout: {
              type: 'column'
          },
          title: 'Employee',
          items: [
              { ... }
          ]
    }
    ]
    Please help! I'm working with a deadline and I can't figure it out!
    Last edited by sublime1; 29 Nov 2012 at 11:11 AM. Reason: formatting

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    What are the words that cause the problem? I could not reproduce the issue with what you supplied. The following example works fine with Ext 4.1.1 & Chrome.
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.tab.Panel',{
            renderTo: Ext.getBody(),
            width: 300,
            height: 200,
            border: 1,
            activeTab: 0,
            items: [{
                  xtype: 'panel',
                  border: 0,
                  activeItem: 0,
                  layout: {
                    type: 'column'
                  },
                  title: 'General',
    //            items: [
    //                 { .... }
    //            ]
            },{
                  xtype: 'panel',
                  border: 0,
                  activeItem: 0,
                  layout: {
                      type: 'column'
                  },
                  title: 'Employee',
    //            items: [
    //                { ... }
    //            ]
            }]
        });
    });

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    sublime1 is on a distinguished road

      0  

    Default


    The words are "General", "Employee" and "Risk Employee". The words that contain "Employee" are causing the scrollbar errors and the "General" causes the greybox error.
    even when I comment out all the items, I still receive the same error.
    More specs:
    • OS: Mac OS X v. 10.6.8
    • Browser: Chrome v. 23.0.1271.95

  4. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Do you encounter the issue with the simple example I posted in my previous post (#2)?

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    sublime1 is on a distinguished road

      0  

    Default


    Yes. Commenting out the items doesn't seem to do the trick... and what I have instead of "onReady" is:

    Code:
        initComponent: function() {
            var me = this;
            me.initialConfig = Ext.apply({
                   trackResetOnLoad: true
            }, me.initialConfig);
            Ext.applyIf(me, {
                   ... // render the panels here
            });
            me.callParent(arguments);
        }
    Last edited by sublime1; 6 Dec 2012 at 8:36 AM. Reason: added additional details

  6. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    1
    Vote Rating
    0
    thistlesifter is on a distinguished road

      0  

    Default


    Any updates on this ? I've had to deal with the same issue (greyed out tab titles for the longer names), this started happening I believe when my Chrome on the Mac Lion 10.7.5 auto-updated to ver. 22.x on or around Sep 25. Had to somehow switch back to Chrome ver. 21.0.1180.89 (and prevent auto-update) - the last good version where things continue to work.

Thread Participants: 2

Tags for this Thread