Introduction
While dynamically loading TabPanel
s into a TabContainer
, I noticed that the border on the TabContainer
wouldn't automatically resize itself. I also couldn't find anything on the web about it. Eventually, I set it to a certain height and hoped that no one would notice, but they did. The content ran on down the page, and the TabContainer
border height was stuck at 400. I used this code to fix that problem.
Hope it works for you!
After creating this write-up, I also found that creating a panel (the equivalent of a div
tag, not a tab panel), setting the height to 100%, and wrapping all the controls in the tab with the panel works just as well - no JavaScript is needed when using this method.
I will leave this up in case someone needs to figure out how to resize a tab in JavaScript for some reason.
Using the code
Use the OnClientActiveTabChanged
property to call some JavaScript.
<ajaxToolkit:TabContainer ID="tabContainer" runat="server"
OnClientActiveTabChanged="doSizeUp" />
Then use this JavaScript function to resize:
function doSizeUp(){
var tc = document.getElementById("<%=tabContainer.ClientId%>");
var tabIndex =
parseInt($find("<%=tabContainer.ClientId%>").get_activeTabIndex(), 10);
tc.childNodes[1].style.height =
tc.childNodes[1].childNodes[tabIndex].clientHeight;
}
Don't forget to call doSizeUp
when the page loads. Here's something that does that:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedHandler);
function PageLoadedHandler(sender, args) {
setTimeout('doSizeUp()', 1);
}
Points of Interest
Please be aware that I only checked this in IE6 and IE7, as that's all that's required when working on our intranet, but I believe it will work in most major browsers.
History
- Submitted - 4/25/08.
- Revised - 4/25/08 - found out another way to do it... probably easier - explained in the introduction.