View Full Version : [OPEN] [EXTJSIV-2542] [4.0.1] Ext.tab.Panel styling issues

27 May 2011, 10:44 AM
I'm trying to style an Ext.tab.Panel's tabs so that they are taller, and will eventually contain images as well. I'm using Sass/Compass to configure the $tab-height, and although it is making the tabs taller, there are many styling issues that result from it:

1. The tab strip is aligned incorrectly so that none of the tabs appear to be active.

2. The tab body is pushed down by an amount seemingly equal to the tab height, resulting in a large void of space between the tabs and the actual tab content.

3. The active tab is the same height as inactive tabs, so even if the strip is manually repositioned, the active tab will not overlay the strip.

4. The tab scrollers' image sprite stops after about 40px and looks awkward.

Example setup:


Ext.onReady( function() {

Ext.define("Foo", {
extend: "Ext.panel.Panel",
alias: "widget.foo",

title: 'Imma Tab',
html: "hello"

Ext.create("Ext.panel.Panel", {
width: 200,
height: 300,
frame: true,
layout: "fit",
renderTo: document.body,
items: {
xtype: "tabpanel",
cls: "big-tab-panel",
items: [{
xtype: "foo"
xtype: "foo"
xtype: "foo"


$include-default: false;

$tab-height: 75px;

@import 'ext4/default/all';

.big-tab-panel {
@include extjs-tabbar;
@include extjs-tab;

$relative-image-path-for-uis: true;

Screenshot in Firefox:

Side note questions:

1. There is a default rule on tabs that hides any images nested inside a tab, any reason for this? The rule is as follows:

.x-tab img {
display: none;

2. Why do tabs no longer have a mouseover/hover effect? It doesn't appear to be configurable like the default behavior in 3.3.

28 May 2011, 7:03 AM
This is a complete bug report. Do you want this thread to be moved to Bugs.

29 May 2011, 4:31 AM
Yes, sorry... posted on the wrong forum :">


29 May 2011, 6:54 AM

4 Jun 2011, 2:24 AM

i got the same problem with the gap between tabs and content. Is there any Hotfix or Workaround yet? Or do i have to wait for the next public release?


7 Jun 2011, 5:32 AM
I haven't found a workaround yet.

8 Jun 2011, 7:37 AM
I tested it again with 4.0.2 RC3
Still a gap. Is there any chance that this will be fixed in 4.0.2?


17 Jun 2011, 9:10 AM
I'm experiencing the same problem.

17 Jun 2011, 3:25 PM
@chinabuffet thank you for reporting this, @others thank you for letting us know this issue is still occurring. Filed as EXTJSIV-2542

20 Jun 2011, 10:26 AM

Seems to be ok for me (on latest release). I tested on FF 4 and Safari.


All I done was add $tab-height into the default SCSS file:

$tab-height: 75px;

@import 'compass';
@import 'ext4/default/all';

I have changed the height of the default scroller images so they work better. You can grab them here: http://cl.ly/7kNJ

23 Jun 2011, 5:25 AM
Just gave it a try in 4.0.2 and it's still happening. I also realized there is a difference in behavior in how I went about trying to make the tabs bigger vs. how you went about it (within the sass code). With my way, the same problem happened (content pushed way down like in my original screenshot), but with yours it seems to work.

The only problem with your solution is that it affects all tab panels; I only need this to be applied to a single instance.

Any ideas/suggestions?