Results 1 to 2 of 2

Thread: Hiding TabPanel Header

  1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Illinois
    Posts
    32
    Vote Rating
    0
      0  

    Default Answered: Hiding TabPanel Header

    I have an application where I am wanting to utilize the TabPanel widget. My problem is this: If I have only one tab, I want the header of the TabPanel to be hidden, as there is no need to show the header if only one tab is available.

    I am using the advanced tabs example found here-> http://www.sencha.com/examples/#advancedtabs

    I
    believe that there should be a simple solution to this, but I cannot find it anywhere.

    I have tried adding a style name based on the number of TabItems, but my CSS doesn't seem to be working correctly.

    Here's my logic for adding and removing the style name:
    Code:
    if(numberOfTabs == 1){
         addStyleName("hidden-tab-bar");
    }else{
         removeStyleName("hidden-tab-bar");
    }
    and my associated CSS:
    Code:
    .hidden-tab-bar .x-tab-panel .x-tab-panel-header {
         display: none;
    }
    .hidden-tab-bar .x-tab-panel .x-tab-panel-body { 
        border-top: 1px solid #D0D0D0; /* restore the top border using the same color as the panel */
    }
    Am I missing something or just approaching the problem incorrectly? Any help would be greatly appreciated.

    Thanks in advance,

    Joshua S.

  2. The problem is that .hidden-tab-bar and .x-tab-panel are on the same element. Thereof the selector would be ".hidden-tab-bar.x-tab-panel" which is not yet currently supported cross browser.

    You can remove this .x-tab-panel in between. Another problem which you will get than with this approach is that you will also hide the header of any child TabPanel. The correct solution would be to add assign the display none directly to the correct element.,

  3. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Answers
    60
    Vote Rating
    131
      0  

    Default

    The problem is that .hidden-tab-bar and .x-tab-panel are on the same element. Thereof the selector would be ".hidden-tab-bar.x-tab-panel" which is not yet currently supported cross browser.

    You can remove this .x-tab-panel in between. Another problem which you will get than with this approach is that you will also hide the header of any child TabPanel. The correct solution would be to add assign the display none directly to the correct element.,

Posting Permissions

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