1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    k0smita is on a distinguished road

      0  

    Default Answered: Changing tab height in tabbar using Compass theming

    Answered: Changing tab height in tabbar using Compass theming


    I successfully used theming with Compass and Ext4.0.7 to change tab height in tabbar using:
    Code:
    $tab-height: 40px !default;
    at the top of my-theme.scss

    This, however, changes the height of tabs globally, in all TabPanels, while I would be able to customize different TabPanels of my app in different way. For Panel or ProgressBar it can be done using @mixin/ui, but there is no ui for TabPanel.

    So is it possible at all to change selectively $tab-height only for some TabPanel classes?

    P.S.
    I would like to do it in scss theme, in a custom-ui-like way, avoiding a hassle of customizing final css like described here.

  2. You will need to specify a cls on the tabpanels you want the tabs to be changed and do some SCSS in that cls.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will need to specify a cls on the tabpanels you want the tabs to be changed and do some SCSS in that cls.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    k0smita is on a distinguished road

      0  

    Default


    OK, so I did as suggested, used the cls.

    For the record, below I put a way that makes tweaking the tabpanel css using cls config a little bit easier.

    First, of course set:
    Code:
    cls: 'MainPanel'
    in TabPanel config.

    Then, create a custom theme:
    Code:
    $include-default: false;
      
    // customize tab variables:
    $tab-height: 40px !default;
    $tabbar-strip-height: 7px !default;
    
    @import 'ext4/default/all';
    
    // include only TabPanel-related stuff
    .MainPanel { @include extjs-tabbar; };
    .MainPanel { @include extjs-tab; };
    
    $relative-image-path-for-uis: true; // defaults to "../images/" when true
    and copy all tab height-related CSS rules to another CSS file.

    The point of this procedure is that it will automatically generate all rules by calculating height of all elements just based on $tab-height and putting .MainPanel at front:
    Code:
    .MainPanel .x-border-box .x-tab-bar-top .x-tab-bar-body-default-plain {
        height: 43px;
    }

Thread Participants: 1

Tags for this Thread