Click here to Skip to main content
6,292,426 members and growing! (10,259 online)
Email Password   helpLost your password?
Web Development » Ajax and Atlas » Controls     Intermediate License: The Code Project Open License (CPOL)

Auto Resize TabContainer

By PopeDarren

Automatically resize a TabContainer or TabPanel.
C#, VB, Javascript, CSS, HTML, .NET (.NET 2.0, .NET 3.0), ASP, ASP.NET, Ajax, Dev
Posted:25 Apr 2008
Views:14,491
Bookmarked:30 times
Announcements
Loading...
 
Search    
Advanced Search
printPrint   Broken Article?Report       add Share
  Discuss Discuss   Recommend Article Email
2 votes for this article.
Popularity: 1.30 Rating: 4.33 out of 5

1

2

3
1 vote, 50.0%
4
1 vote, 50.0%
5

Introduction

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.

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(){
    //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);
}

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

PopeDarren


Member

Location: United States United States

Other popular Ajax and Atlas articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
  (Refresh) 
-- There are no messages in this forum --

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 25 Apr 2008
Editor: Smitha Vijayan
Copyright 2008 by PopeDarren
Everything else Copyright © CodeProject, 1999-2009
Web20 | Advertise on the Code Project