How to fix 16x16 icons clipped in tabpanel?

[robot1125]

It appears that standard 16x16 icons get clipped in the tabs of a default tabpanel. Even the Sencha advanced tabs example exhibits that behavior:

IbH8X.png

What is the preferred method to increase the height of the tabs in the tab bar so the entire icon will be displayed?

[neongrau]

i've fixed it with this css snippet:

.x-tab-default-top button,
.x-tab-default-top .x-tab-inner {
  height: 16px !important;
}

[robot1125]

i've fixed it with this css snippet:

Thank you, that works perfectly!

[mediacept]

Thank you neongrau

[ssamayoa]

i've fixed it with this css snippet:

.x-tab-default-top button,
.x-tab-default-top .x-tab-inner {
  height: 16px !important;
}

Did you modified ext-xxx..css or put that in an extra css file?

[mediacept]

Just puted it in an extra css file called after the ext-xxx..css

[edspencer]

We'll get this fixed in the theme, should be in 4.1

[tangix]

Interestingly I see the opposite in FF8 on my app - the icon is clipped at the top and the CSS work-around does not help as shown in this picture, where the top pixels are missing:

clipped icon.PNG

Tested in 4.0.7 and 4.1-PR1 with same result.