PDA

View Full Version : [REOPENED] [1.1 final] CSS problem with nested tab panels



willydee
11 Jul 2007, 7:29 AM
Given is a layout with center region containing several content panels working as application modules. Since at the very top is a global menu toolbar and modules aren't switched often, I decided them having tabPosition:'bottom'.
In one panel, an additional TabPanel is nested with tabPosition:'top'. The tabs are rendered at the correct position, but the CSS is not respecting the possible nesting of tabs with different positions, so the top tabs are rendered with the same background image as bottom tabs. See figure below:


----------------------------------------------
menu1 | menu2 | menu3 help
----------------------------------------------
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet...
_______ ____________________
|____| |____| |____|
+-------------------------------+
| tab content |
| |
| |
+-------------------------------+

Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
________________________________________
|____| |____| |____|

mystix
11 Jul 2007, 7:31 AM
/:) ummm... an actual screenshot would be good for discussion.

if you want to you can blank out the sensitive portions of your image. :-/

willydee
11 Jul 2007, 7:33 AM
You're way too fast in replying ;-)
Is that scheme sufficient?

I've had some look with Firebug into the style rules applied, and it's just a CSS problem. The outer class "x-tabs-bottom" is applied to the inner tab panel too, even if it has class "x-tabs-top".

mystix
11 Jul 2007, 7:48 AM
:"> didn't realise i was posting too soon. next time, i'll be sure to wait a couple of hours before replying ;)

if you don't mind, could u post your simplified test case here?

willydee
11 Jul 2007, 7:57 AM
Yes, Sir, I'm on my way! :)

willydee
11 Jul 2007, 8:16 AM
Here we go:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/xtheme-gray.css" />
</head>
<body>
<!-- Main window -->
<div id="north"><div id="main-toolbar">Toolbar</div></div>
<div id="center"></div>

<!-- CORE SCRIPTS -->
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="/ext/source/locale/ext-lang-de.js"></script>
<!-- END CORE SCRIPTS -->

<!-- APPLICATION SCRIPTS -->
<script type="text/javascript">
var layout = new Ext.BorderLayout(document.body, {
north: { initialSize: 25, split:false }
, center: { split: true, autoScroll:true, autoTabs: true }
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north'));
layout.add('center', new Ext.ContentPanel('module1', { autoCreate: true, title: 'Module 1' }));
layout.add('center', new Ext.ContentPanel('module2', { autoCreate: true, title: 'Module 2' }));
layout.add('center', new Ext.ContentPanel('module3'
, { autoCreate: true, title: 'Module 3' }
, '<div class="x-box-mc">' +
'<h3 style="margin:10px 0">Lorem ipsum... </h3>' +
'<div style="margin:10px 0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet...</div>' +
'<div id="module3-tabs">' +
' <div id="tab1"><div style="margin:10px">This is the content of tab 1</div></div>' +
' <div id="tab2"></div>' +
' <div id="tab3"></div>' +
'</div>' +
'<div style="margin:10px 0">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>' +
'</div>'
));
layout.endUpdate();

var toolbar = new Ext.Toolbar('main-toolbar');
toolbar.add('Menu 1', '-', 'Menu 2', '-', 'Menu 3');

var tabs = new Ext.TabPanel('module3-tabs', { tabPosition: 'top' });
tabs.addTab('tab1', "Tab 1");
tabs.addTab('tab2', "Tab 2");
tabs.addTab('tab3', "Tab 3");
tabs.activate('tab1');
</script>
<!-- END APPLICATION SCRIPTS -->
</body>
</html>

And that's how it actually looks like:

tryanDLS
11 Jul 2007, 8:42 AM
Take a look at this thread (http://extjs.com/forum/showthread.php?t=8476) and see if helps. You may need to specify tabPosition on the region.

willydee
11 Jul 2007, 9:05 AM
No, it doesn't. Inspecting the generated HTML with or without specifying the tabPosition property clearly tells that there's no difference. The region's (bottom) tab bar always has class "x-tabs-bottom", and the tab panel's (top) tab bar has class "x-tabs-top", so it is a CSS selector problem.

As soon as I comment out the first and second content panel, the tab panel looks as expected, since no outer tab bar is rendered.

mystix
11 Jul 2007, 9:23 AM
willydee, i further simplified your test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<!-- Ext 1.1 RC 1 examples folder drop-in test-case -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 25,
split:false
},
center: {
split: true,
autoScroll:true,
autoTabs: true,
//*/ <== remove the first '/' to switch to tabPosition: 'bottom' orientation
tabPosition: 'top'
/*/
tabPosition: 'bottom' // <== this is the default tab orientation
//*/
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north'));
layout.add('center', new Ext.ContentPanel('module1', { autoCreate: true, title: 'Module 1' }));
layout.add('center', new Ext.ContentPanel('module3', { autoCreate: true, title: 'Module 3' },
[
'<div class="x-box-mc">',
'<h3 style="margin:10px 0">Lorem ipsum... </h3>',
'<div style="margin:10px 0">',
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit,',
' sed diam nonummy nibh euismod tincidunt ut laoreet...',
'</div>',
'<div id="module3-tabs">',
' <div id="tab1"><div style="margin:10px">This is the content of tab 1</div></div>',
' <div id="tab2"></div>',
' <div id="tab3"></div>',
'</div>',
'<div style="margin:10px 0">',
'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper',
' suscipit lobortis nisl ut aliquip ex ea commodo consequat.',
'</div>',
'</div>'
].join("")
));
layout.endUpdate();

var tabs = new Ext.TabPanel('module3-tabs', {
//*/ <== remove the first '/' to switch to tabPosition: 'bottom' orientation
tabPosition: 'top'
/*/
tabPosition: 'bottom'
//*/
});
tabs.addTab('tab1', "Tab 1");
tabs.addTab('tab2', "Tab 2");
tabs.activate('tab1');
});
</script>
</head>
<body>
<div id="north"><div id="main-toolbar">Toolbar</div></div>
<div id="center"></div>
</body>
</html>




Take a look at this thread (http://extjs.com/forum/showthread.php?t=8476) and see if helps. You may need to specify tabPosition on the region.

didn't work either :(
specifying tabPosition: 'top' works as expected.
the default tabPosition (if unspecified) for a LayoutRegion is 'bottom'.

once a container has a tabpanel with tabPosition: 'bottom', all other nested tabpanels will gain a cascaded x-tabs-bottom css class, and hence will be affected by styles like:
.x-tabs-bottom .x-tabs-strip .x-tabs-right {
background: url(../images/default/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}

[edit]
@willydee, now u're posting faster than i am :))

mystix
11 Jul 2007, 9:58 AM
[solution]
[Ext 1.1 RC 1] lines 386-418 of ext-all.css
.x-tabs-bottom .x-tabs-wrap {
border-top:1px solid #6593cf;
border-bottom:0 none;
padding-top:0;
padding-bottom:2px;
}
.x-tabs-bottom .x-tabs-strip .x-tabs-right {
background: url(../images/default/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-strip .x-tabs-left {
background: url(../images/default/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-right {
background: url(../images/default/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-left {
background: url(../images/default/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-strip a {
position:relative;
top:0; left:0;
}
.x-tabs-bottom .x-tabs-strip .on a {
margin-top:-1px;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-inner {
padding-top:5px;
}
.x-tabs-bottom .x-tabs-body {
border:1px solid #6593cf;
border-bottom:0 none;
} must be replaced with
.x-tabs-bottom > .x-tabs-wrap { /* target the direct child of .x-tabs-bottom, i.e. .x-tabs-wrap */
border-top:1px solid #6593cf;
border-bottom:0 none;
padding-top:0;
padding-bottom:2px;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .x-tabs-right {
background: url(../images/default/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .x-tabs-left {
background: url(../images/default/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .on .x-tabs-right {
background: url(../images/default/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .on .x-tabs-left {
background: url(../images/default/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip a {
position:relative;
top:0; left:0;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .on a {
margin-top:-1px;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-strip .on .x-tabs-inner {
padding-top:5px;
}
.x-tabs-bottom > .x-tabs-wrap .x-tabs-body {
border:1px solid #6593cf;
border-bottom:0 none;
}
.x-tabs-body .x-tabs-bottom > .x-tabs-body { /* fix all nested tabPanels having tabPosition: 'bottom' */
border:1px solid #6593cf;
border-bottom:0 none;
}

(tested with the simplified test case above with no apparent side effects.)

[edit]
added css style to fix all nested tabPanels having tabPosition: 'bottom'

willydee
12 Jul 2007, 12:14 AM
Hello mystix,

thanks for fixing this. Now we just need the same for the CSS theme files ;-)

mystix
12 Jul 2007, 12:19 AM
haha...

your turn to do some fixing. :)
once you have them fixes, be sure to post them here ;)

willydee
12 Jul 2007, 12:59 AM
Okay, I'll try this, but now I need to do my work first ...

mystix
12 Jul 2007, 3:46 AM
[edit 1]
- please test these on standalone TabPanels. i've yet to do that.

[edit 2]
all done. please test rigorously and post your findings here.

[edit 3]
fixed xtheme-aero.diff, and saved all files with unix line endings

willydee
12 Jul 2007, 4:59 AM
Hmm, again I have to learn something new ;)
I never used any diff tool so far...

willydee
13 Jul 2007, 1:02 AM
Hello mystix, just two short questions:

1) Which Ext version those diffs are for? I tried to patch the relevant files in 1.1RC1, but all hunks were rejected.
2) Which tool are you using to create/apply diffs? Since there are CRLFs inside, I assume a Windows based one, right?

[edit]
Never mind.
(1) I tried to patch on a Linux host, and the failure was caused by those CRLF's.
(2) GnuWin32's patch command does just fine.

[edit2]
xtheme-aero.diff is missing a newline at the very end. Fixed.

mystix
13 Jul 2007, 1:50 AM
the diffs are for Ext 1.1 RC1. used winmerge to create them.

i've fixed xtheme-aero.diff, and updated the files above with unix line endings.

by the way, you can use the linux dos2unix command to convert line endings from DOS to UNIX.

willydee
13 Jul 2007, 2:14 AM
Thanks, mystix. I'm not aware of a dos2unix util, at least it is not part of a current Debian distribution.

[edit]
Today I'm posting just too quick. Sure there is a Debian package, named tofrodos and supplying dos2unix/unix2dos symlinks.

mystix
13 Jul 2007, 2:46 AM
np. ;) so are the diff hacks working?

[p.s.]
debian? :-?

could you check out this thread (http://extjs.com/forum/showthread.php?t=8409) and post your findings regarding FF1.5 / FF2.0 / Konquerer there? thanks.

willydee
13 Jul 2007, 3:35 AM
I have not noticed any anomalies, the tabs are looking correct, even when nesting them three or four times with different tab directions. Tested in IE7 / FF 2.0.0.4.

Debugging Linux related Firefox problems is not possible for me. I'm working on a Windows machine, and the Linux server I'm using has no X11 running, just local console and SSH access. Sorry.

Saki? *smile*

mystix
13 Jul 2007, 3:40 AM
I have not noticed any anomalies, the tabs are looking correct, even when nesting them three or four times with different tab directions. Tested in IE7 / FF 2.0.0.4.yay :D one final test i didn't do -- a plain old simple standalone TabPanel.



Debugging Linux related Firefox problems is not possible for me. I'm working on a Windows machine, and the Linux server I'm using has no X11 running, just local console and SSH access. Sorry.oh well it's alright then. thanks.

willydee
4 Aug 2007, 3:03 PM
Hello mystix,

today I was rather surprised when I discovered this fix wasn't integrated into the 1.1 release ... :-?

jack.slocum
4 Aug 2007, 5:10 PM
The fix is not cross browser (doesn't work in IE6). For nesting tabs, you will need to create nesting rules. Basically, rules like ".x-tabs-bottom .x-tabs-top ..." for every tab rule.

It is not included by default because it would add a lot of extra CSS to cover every possible combination in every theme. It is much easier (and smaller) for you to include the specific nesting rules you need.

willydee
4 Aug 2007, 5:21 PM
I see. mystix has demonstrated the way to go, so I'll do that.