Databases
StackOverflow2013
Postsdbo
POHow can I set child tab height in a nested ajax asp.net tab?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I set child tab height in a nested ajax asp.net tab?
    text
    copied!<p>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:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %&gt; &lt;html lang="en"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt; &lt;script src="../js/jquery-1.6.2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="../js/modernizr-latest.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="../js/admin.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt; &lt;/cc1:ToolkitScriptManager&gt; &lt;section&gt; &lt;cc1:TabContainer ID="TabContainerMain" runat="server" Height="300px"&gt; &lt;cc1:TabPanel ID="tp2" runat="server" HeaderText="test 2"&gt; &lt;ContentTemplate&gt; &lt;section&gt; &lt;div style="height: 100%; width: 30%; float: left;"&gt; &lt;div&gt; &lt;asp:Label ID="Label5" runat="server" Text="Search:"&gt;&lt;/asp:Label&gt; &lt;br /&gt; &lt;asp:TextBox ID="TextBox2" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;input id="Button1" type="button" value="Search" onclick="SearchClick(this)" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="width: 70%; float: left;"&gt; &lt;cc1:TabContainer ID="SubTabContainerUg" runat="server" ActiveTabIndex="0"&gt; &lt;cc1:TabPanel ID="subTab1" runat="server" HeaderText="Cubes"&gt; &lt;ContentTemplate&gt; &lt;div style="height: 100%;"&gt; &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/ContentTemplate&gt; &lt;/cc1:TabPanel&gt; &lt;cc1:TabPanel ID="subTab2" runat="server" HeaderText="Reports"&gt; &lt;ContentTemplate&gt; &lt;div&gt; &lt;asp:TextBox ID="TextBox3" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/ContentTemplate&gt; &lt;/cc1:TabPanel&gt; &lt;/cc1:TabContainer&gt; &lt;/div&gt; &lt;/section&gt; &lt;/ContentTemplate&gt; &lt;/cc1:TabPanel&gt; &lt;cc1:TabPanel ID="tp3" runat="server" HeaderText="test 3"&gt; &lt;ContentTemplate&gt; &lt;/ContentTemplate&gt; &lt;/cc1:TabPanel&gt; &lt;/cc1:TabContainer&gt; &lt;/section&gt; &lt;footer&gt; This is footer. &lt;/footer&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Note: 1) My initial non-maintanable solution was to set this height in the code behind server as follows:</p> <pre><code>SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43); </code></pre> <p>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.</p> <p>2) I simplified the markup for brevity'sake. Both main tab and child tab will contain controls like textboxes and list boxes.</p> <p>3) This page is used as a dialog and runs in FF and IE7/8/9.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload