Change the Height of an ExtJS 4 Tab

Question

---

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/

Answer 1

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.