View Full Version : Tabs Question

12 Oct 2006, 3:44 PM
I've been playing around to better learn these extensions. In doing so I've taken your main page and been playing around. In doing so I've run into a problem. I was trying to add a tabpanel in the


The tabs will actually display but they render incorrectly, any idea on what I'm missing?


12 Oct 2006, 3:58 PM
Can you put it in a code block? Your html got stripped.

13 Oct 2006, 6:43 AM
Sorry about that, in the main html section of your page I added

#tabpanel {width:100%;}
#tabpanel .yui-ext-tabbody {border:1px solid #999;border-top:none;height:600px;overflow:auto;}
#tabpanel .yui-ext-tabitembody {display:none;padding:10px;}


<div>Content Here</div>
<div>And content here</div>


and in the Blog.js I added in the InitUI : funcion

this.tabpanel = getEl('tabpanel');

this.tabpanel = new YAHOO.ext.TabPanel('tabpanel');
this.tabpanel.addTab('test1-tab', 'Test');
this.tabpanel.addTab('test2-tab', 'Test2');

At first the tabs display correctly but when clicked on the tabs disconnect from the panel content area.

13 Oct 2006, 6:46 AM
looks like even in the code block information is getting stripped:

frist div is id=innerBody
(end and begin where just HTML comments)

next id=tabpanel
next id=test1-tab
next id=test2-tab

13 Oct 2006, 6:47 AM
Lovely, it appears to have stripped all your attributes this time.

Can you throw a link up anywhere?

13 Oct 2006, 6:51 AM
This probably isn't the cause of the problem, but I'm wondering why you are setting this.tabpanel to the Element and then overwriting it with the TabPanel?

this.tabpanel = getEl('tabpanel'); <-- set it to element

this.tabpanel = new YAHOO.ext.TabPanel('tabpanel'); <-- overwrite with TabPanel
this.tabpanel.addTab('test1-tab', 'Test');
this.tabpanel.addTab('test2-tab', 'Test2');

I take it you included both yui-ext js and tabs.css?

13 Oct 2006, 7:01 AM
http://yuitest.homeunix.com/yui-test/ theres a link to an example of that behavior.

13 Oct 2006, 7:11 AM
I'm not sure if it's the problem, but the first thing I noticed was you are missing a body tag. I will look some more...

13 Oct 2006, 7:11 AM
looks like even in the code block information is getting stripped:

Just click on "Disable HTML in this Post" while posting such code tags..
it will show all the code tags properly

13 Oct 2006, 7:19 AM
Thanks adi, I didn't know that either.


That is a very interesting problem. I've never seen bouncing tabs before. I'm still looking at it...

13 Oct 2006, 7:26 AM
Well it makes me feel a little better its nothing super obvious. :) Thanks for the help! I've added the body and removed the getEl, didn't seem to change anything. Also when I set tabpanel height to 100% it becomes bigger than innerBody, I found that strange as well.

13 Oct 2006, 7:27 AM
Ok this could be the problem.

You have the dev version of the code from my website (yui-ext_32_3.js) but it appears you have an older (0.32.2) version of the CSS.


Plug in that tabs.css and see if it fixes it.

13 Oct 2006, 7:35 AM
I put that in and didn't seem to help, if anything when the tab is selected a side of it's borders disapears.

diff tabs.css tabs-32_3.css
< .tabset .hd li a, .tabset .hd li strong {background:#ccc url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tr_999.gif) no-repeat top right;}
> .tabset .hd li a {background:#ccc url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tr_999.gif) no-repeat top right;}

16 Oct 2006, 6:07 AM
This is what the problem in the .css that was causing the tabs to bounce.

#innerBody strong{ -- was causing bouncing tabs
color: #083772;
font-weight: bold;
margin: 0px;
margin-bottom: 4px;
margin-top: 10px;
padding: 0px;

16 Oct 2006, 8:10 AM
I knew it had to be something to do with my blog stylesheet, that thing is loaded with styles that weren't being used. Anyways, way to track it down.