PDA

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



chinabuffet
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:

JS:


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"
}]
}
})
});


Sass:


$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:
http://www.sencha.com/forum/attachment.php?attachmentid=26308&d=1306521122
26308


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.

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

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

Thanks

jsakalos
29 May 2011, 6:54 AM
Moved.

HyperteX
4 Jun 2011, 2:24 AM
Hi,

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?

Regards

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

HyperteX
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?

Regards

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

mike.estes
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

rdougan
20 Jun 2011, 10:26 AM
@chinabuffet

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

http://f.cl.ly/items/0y2q3H1u1R0l1A1q2E3E/Screen%20Shot%202011-06-20%20at%2011.24.38%20AM.png

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

chinabuffet
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?