PDA

View Full Version : TabPanel: tabPosition: 'top'



jbraband
24 Feb 2007, 8:01 PM
this I believe should be a quick one...

i'm using the vista theme CSS and a TabPanel that I have where the tabs are set to be on top are rendering as bottom tabs. They are above the content bodies as they should be, but the individual tabs are rendering with rounded corners on the bottom instead of the top....quick fix with something?

-j

jack.slocum
25 Feb 2007, 3:27 AM
Did you look in firebug and see what was overriding the style? I am looking here with Vista selected and it looks fine.

http://yui-ext.com/deploy/ext-1.0-alpha2/examples/tabs/tabs.html

FB
27 Feb 2007, 7:09 AM
I have the same issue. In my case I've got a TabPanel inside a ContentPanel which is inside a BorderLayout. The center region of the layout has several ContentPanels (so center region has also tabs).

The center region tabs are working properly (bottom situation - bottom look), however the TabPanel tabs are depicted on top but with bottom look.

http://www15.brinkster.com/benavente/ext1.jpg
http://www15.brinkster.com/benavente/ext1.jpg

jbraband
27 Feb 2007, 7:12 AM
yup, tabpanel inside a contentpanel inside a border layout for me too.

i'll try and whip up a simple example for everyone to look at. glad to hear that it aint just me.

FB
27 Feb 2007, 7:27 AM
yup, tabpanel inside a contentpanel inside a border layout for me too.

i'll try and whip up a simple example for everyone to look at. glad to hear that it aint just me.

It seems the style for tabs of the center region is overriding the style for the TabPanel tabs. But no idea to solve it. I added a window capture in my previous post

jack.slocum
27 Feb 2007, 8:44 AM
When nesting tabs, the parent rules take priority. I have added to the (long) list to add a common (1 level deep) of nesting rules to the default tabs.css. Hopefully this will help.

FB
27 Feb 2007, 8:47 AM
Thank you Jack.

Fernando

jbraband
27 Feb 2007, 9:00 AM
what should the css class be for the tabpanel....can we override it at the tabpanel level for now until it makes it up the (long) list of bugs? 8)

jack.slocum
27 Feb 2007, 9:14 AM
If you look at the css for tabs it looks like this:

.x-tabs-strip .on .x-tabs-right....

.x-tabs-bottom .x-tabs-strip .on .x-tabs-right...

And it needs some more rules like:

// when a top is inside a bottom, use the top rule
.x-tabs-bottom .x-tabs-top .x-tabs-strip .on .x-tabs-right...

It's long and digusting but it should work.

jbraband
27 Feb 2007, 9:56 AM
its the inner-beauty of Ext that matters...not the nasty-ugly syntax of a temporary hack.

if you cant judge a book by its cover, then you cant judge a div by its style definition :wink:

brian
8 Mar 2007, 1:45 AM
I was looking for this solution, thanks! I posted a cut and paste over here:
http://www.yui-ext.com/forum/viewtopic.php?p=15995#15995

Mark
4 Aug 2007, 3:56 AM
@brian
This sounds good! Would you be so kind and fix the broken link?=P~