Geek Answers Handbook

How to set top tab height in asp.net asjax tab?

I have 2 subnet ajax asp.net tabs. If I set the initial height of the parent tab (TabContainerMain) to say 300, how to set the height of the 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 decision, not related to the basic requirements, was to set this height in the code behind the server as follows:

 SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);

Please note that this code works correctly for IE7 / 8/9, which resizes the tab and keeps the container at the same height (= 300 px), but the code above doesn’t work, because if I change the style (fields / borders) of the child container tablets, then the above code should also change (more precisely, a hard-coded constant).

2) I simplified the markup for brevity. Both tabs on the main tab and the child will contain controls, such as text fields and lists.

3) This page is used as a dialog and works in FF and IE7 / 8/9.

+7
source share
1 answer

Answer

Solving your problem is relatively easy to achieve using jQuery. For each TabContainer that you want to resize to its parent size, you should:

 // SubTabContainerUg is the TagContainer 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);

More details

  • Locate the title element of the child tab control (which contains the tab buttons);

     var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');

  • Find the body element of the child tab control (the body of the selected tab);

     var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');

  • Find the body element of the tab control (where the child tab control is located);

     var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');

  • Set the height of the body of the child of the tab as the height of the body of the parent of the tab (minus the height of the header of the child tab and top position - the top position includes any parental indentation and any field of the element).

     mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);

This solution works in:

Edit: Changed offset() to position() . At position() docs:

When positioning a new element next to another and inside the same one containing the DOM element, .position () is most preferred.

Edit 2: Here is the essence of your markup , here is my markup and code , and here is the version showing the differences .

  • I refer to http://code.jquery.com/jquery-1.6.2.min.js - I hope you refer to the original and unmodified copy of this code.

  • Removed height: 100%; from the first div inside cc1:TabPanel ID="tp2" .

  • Changed the second div from float: left; before float: right; (this div contains cc1:TabContainer ID="SubTabContainerUg" ).

  • Removed style="height: 100%;" from div inside cc1:TabPanel ID="subTab1" .

+4
source

More articles:


All Articles