tabpanel overwriting content below it

[jbowman]

I'm trying to implement a tabpanel inside a block in my website, but if I have content immediately after it, the tabs make the tabpanel element bigger, while not pushing the content below them down, instead, over writing a portion of them.

Here's some code

	var profExplain = YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'profileExplain'}, true);
	profExplain.update('test');

	YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'profileView'});
	YAHOO.ext.DomHelper.applyStyles('profileView', {height: '100px'});

	var profileTabs = new YAHOO.ext.TabPanel('profileView');
	YAHOO.ext.DomHelper.append(document.body, {tag: "div", id: "test1"});
	profileTabs.addTab('test1', "test");
	var testappend = YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'test2'}, true);
	testappend.update('test 2');

Here's a link where you can see it
http://whasit.com/ci/ucp Note: you have to click on "My View" to see exactly what I'm talking about.

The "test 2" is there, you just can't see it because it's under the tab panel. Looking at the generated source in firebug, you can see it does exist.

Sorry if this is an easy fix, I'm averaging 3-5 hours of sleep tops all this month. I've been banging at this for a while, but my brain isn't quite all there.

[Animal]

            headerTabs = layout.add('north', new YAHOO.ext.NestedLayoutPanel(headerLayout, {fitToFrame:true}));

and north has an initialHeight of 50. It will be 50 pixels high. You won't be able to see any tabpanel.

Whay have you got a complex entity like a layout in a header section????

[jbowman]

actually the header works fine

What you're referring to is the nav bar at the top. That center region gets tabs updated to it depending on the login status of the user, and eventually, which page they are on. If you want to see an example feel free to make an account, the database gets reset with my local copy when I update the site.

The problem I'm having is in the 2 large columns in the view created when you click "My View" on the sidebar in the provided link. I'm trying to populate those with a collection of views and tabpanels. The tabpanels are presenting the aforementioned problem though.

[jbowman]

I added more text to the testdiv to demonstrate better the problem, now you can visually see the overlap.

[jbowman]

appears my host has some database issues lately :| the joys of shared hosts

however, in theory I think I have a solution I'm hoping to check soon. I think it might just be a simple case of I need to repaint the contentpanel element

[jbowman]

nevermind, that didn't work

[jack.slocum]

The tab control isn't overlapping the text. If you open it in firebug and mouse over them you will see what I mean.

The problem is the tab body element has no height set (it's auto) and you set a height on the tab container (100px). This causes the body element to overflow the container element (as per w3c spec) and overlap the text.

What you want to do is set the height of the body element (which is what is overflow auto), not the tab container OR you can call syncHeight() on the TabPanel and it will make sure all the heights are correct automatically (as long as the body is overflow auto or hidden).

[jbowman]

I got it with the syncHeight, which I had tried before... the catch? I never activated the tab so was confused cause I wasn't seeing the content. I need sleep :p Thanks Jack.