Change the Height of an ExtJS 4 Tab

2
votes

Context: I'm writing an ExtJS application to help volunteers manage a camp database. Containing emergency information, dietary requirements and cabin allocation. I want it to be user-friendly so that volunteers will pick it up quickly, so I decided the tabs need to be bigger to draw attention to the main actions of the application.

Problem: I just don't know how to change the tab height though.

Work so far:

  • I've tried setting the tabBar property for my tab panel, but the tabs didn't resize and the styling just looked weird
  • I looked through forums and people suggested modifying the CSS, but there were no examples

Can you help? This is what I want to acheive:

http://tinypic.com/r/sltr9g/7

http://postimage.org/image/10x22n8ec/

3
tabssizeheightextjs4tabpanel

3 Answers

13
votes

I think I've found a solution!

Ensure you have set the 'cls' property of the Ext.tab.Panel you're using, then paste the following into your custom CSS file.

.MainPanel .x-tab-bar-strip {
    top: 40px !important; /* Default value is 20, we add 20 = 40 */
}

.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important; /* Default value is 23, we add 20 = 43 */
    border: 0 !important; /* Overides the border that appears on resizing the grid */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 33px !important; /* Default value 13, we add 20 = 33 */
    line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}

Note this makes the tabs bigger and middle-aligns the text, but ideally the icon would also be middle-aligned.

2
votes

Using new ExtJS 4 theming with Compass you can just set:

$tab-height: 40px !default;

in appname/resources/sass/my-ext-theme.scss.

The only issue you will encounter is extra space below tab bar bug, which always appears when using custom theme. But this can be solved easily, as explained there, by setting in one of your CSS: 

.x-tab-bar
{
    position: absolute;
}

In resources/themes/stylesheets/ext4/default/variables/_tabs.scss file in ExtJS package, you can find other useful variables to customize tab size and color.

0
votes

If you are using extjs4 do use the SASS and Compass to make any changes in the extjs stylesheet.

You can just add below variable in my-custom-theme.scss to change the height of the tab:

$tab-height: 40px;