StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1><strong>Answer</strong></h1> <p>The solution to your issue is relatively simple to achieve using jQuery. For each <code>TabContainer</code> that you want to resize to its parent's size, you must:</p> <pre class="lang-js prettyprint-override"><code>// 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); </code></pre> <hr> <h1><strong>Details</strong></h1> <ol> <li><p>Find the <strong><em>child tab control</em></strong>'s header element (which holds the tab buttons);</p> <pre><code>var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header'); </code></pre></li> <li><p>Find the <strong><em>child tab control</em></strong>'s body element (the body of the selected tab);</p> <pre><code>var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body'); </code></pre></li> <li><p>Find the <strong><em>parent tab control</em></strong>'s body element (where the child tab control is located);</p> <pre><code>var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body'); </code></pre></li> <li><p>Set the <strong><em>child tab control</em></strong>'s body height to be the <strong><em>parent tab control</em></strong>'s body height (minus the <strong><em>child tab</em></strong>'s header height and top position - the top position includes any parent padding, and any element margin).</p> <pre><code>mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top); </code></pre></li> </ol> <hr> <p>This solution worked in:</p> <ul> <li><a href="http://i.stack.imgur.com/YzgL5.png" rel="nofollow">Firefox 20.0</a></li> <li><a href="http://i.stack.imgur.com/bNyN6.png" rel="nofollow">Chrome 26.0.1410.64</a></li> <li>Internet Explorer <a href="http://i.stack.imgur.com/dcV4g.png" rel="nofollow">6</a> / <a href="http://i.stack.imgur.com/UMmRM.png" rel="nofollow">7</a> / <a href="http://i.stack.imgur.com/TTlss.png" rel="nofollow">8</a> / <a href="http://i.stack.imgur.com/0CFMm.png" rel="nofollow">9</a> / <a href="http://i.stack.imgur.com/cznsy.png" rel="nofollow">10</a></li> </ul> <hr> <p><strong>Edit:</strong> Changed <code>offset()</code> to <code>position()</code>. Per the <a href="http://api.jquery.com/position/" rel="nofollow"><code>position()</code></a> docs:</p> <blockquote> <p>When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.</p> </blockquote> <hr> <p><strong>Edit 2:</strong> Here's a <a href="https://gist.github.com/Irrational86/3e90ba54a78a41b41d1d/db3ae047783a45ae9f1985e29a93abcdf71f057a" rel="nofollow">Gist of your markup</a>, <a href="https://gist.github.com/Irrational86/3e90ba54a78a41b41d1d/4c3b99812ce429664e0f4dba3c1c663978a054be" rel="nofollow">here's my markup and code</a>, and here's a <a href="https://gist.github.com/Irrational86/3e90ba54a78a41b41d1d/revisions" rel="nofollow">revision showing the differences</a>.</p> <ol> <li><p>I reference <code>http://code.jquery.com/jquery-1.6.2.min.js</code> - hopefully you are referencing an original and unmodified copy of it in your code.</p></li> <li><p>Removed <code>height: 100%;</code> from the first div inside <code>cc1:TabPanel ID="tp2"</code>.</p></li> <li><p>Changed the second div from <code>float: left;</code> to <code>float: right;</code> (this div contains the <code>cc1:TabContainer ID="SubTabContainerUg"</code>).</p></li> <li><p>Removed <code>style="height: 100%;"</code> from the div inside <code>cc1:TabPanel ID="subTab1"</code>.</p></li> </ol>

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