While dynamically loading TabPanels 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.
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(){
//get the tabContainer for later reference
var tc = document.getElementById("<%=tabContainer.ClientId%>");
//get the index of the tab you just clicked.
var tabIndex =
parseInt($find("<%=tabContainer.ClientId%>").get_activeTabIndex(), 10);
//set the tabcontainer height to the tab panel height.
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);
}
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.
| You must Sign In to use this message board. | ||||||
|
||||||
|
||||||
|
||||||
