PDA

View Full Version : Tabs Question



evidor
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
<div>

<div>
<div></div>
<div></div>
</div>

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

Thanks

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

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


<style>
#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;}
</style>

<div>
<end>

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

<begin>
</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.

evidor
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

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

Can you throw a link up anywhere?

jack.slocum
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?

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

jack.slocum
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...

techno_adi
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

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

evidor:

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

evidor
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.

jack.slocum
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.

http://www.jackslocum.com/blog/css/tabs.css

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

evidor
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
15c15
< .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;}

evidor
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;
}

jack.slocum
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.