How can I set child tab height in a nested ajax asp.net tab?
I have 2 Nested ajax asp.net tabs. If I set the initial height of the parent tab (TabContainerMain) to say 300, how can I set the height of child tab (SubTabContainerUg) in css or jquery? The markup is shown below:
<!DOCTYPE html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html lang="en">
<head runat="server">
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../js/modernizr-latest.js" type="text/javascript"></script>
<script src="../js/admin.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<section>
<cc1:TabContainer ID="TabContainerMain" runat="server" Height="300px">
<cc1:TabPanel ID="tp2" runat="server" HeaderText="test 2">
<ContentTemplate>
<section>
<div style="height: 100%; width: 30%; float: left;">
<div>
<asp:Label ID="Label5" runat="server" Text="Search:"></asp:Label>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="Search" onclick="SearchClick(this)" />
</div>
</div>
<div style="width: 70%; float: left;">
<cc1:TabContainer ID="SubTabContainerUg" runat="server" ActiveTabIndex="0">
<cc1:TabPanel ID="subTab1" runat="server" HeaderText="Cubes">
<ContentTemplate>
<div style="height: 100%;">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="subTab2" runat="server" HeaderText="Reports">
<ContentTemplate>
<div>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</section>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tp3" runat="server" HeaderText="test 3">
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</section>
<footer> This is footer. </footer>
</form>
</body>
</html>
Note: 1) My initial non-maintanable solution was to set this height in the code behind server as follows:
SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);
Notice that this code works correctly for IE7/8/9, that is resizing the sub tab and keeping the container at the same height (= 300 px), but code above is not good because if I change the style(margins/borders) of the child tab container then the above code (to be precise the hardcoded constant) must change too.
2) I simplified the markup for brevity'sake. Both main tab and child tab will contain controls like textboxes and list boxes.
3) This page is used as a dialog and runs in FF and IE7/8/9.
Answer
The solution to your issue is relatively simple to achieve using jQuery. For each TabContainer that you want to resize to its parent's size, you must:
// SubTabContainerUg is the TagContainer's ID property.
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
Details
Find the child tab control 's header element (which holds the tab buttons);
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');
Find the child tab control 's body element (the body of the selected tab);
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
Find the parent tab control 's body element (where the child tab control is located);
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
Set the child tab control 's body height to be the parent tab control 's body height (minus the child tab 's header height and top position - the top position includes any parent padding, and any element margin).
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
This solution worked in:
Edit: Changed offset() to position() . Per the position() docs:
When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.
Edit 2: Here's a Gist of your markup, here's my markup and code, and here's a revision showing the differences.
I reference http://code.jquery.com/jquery-1.6.2.min.js - hopefully you are referencing an original and unmodified copy of it in your code.
Removed height: 100%; from the first div inside cc1:TabPanel ID="tp2" .
Changed the second div from float: left; to float: right; (this div contains the cc1:TabContainer ID="SubTabContainerUg" ).
Removed style="height: 100%;" from the div inside cc1:TabPanel ID="subTab1" .