Hi Unittig,

The scenario was not clear to me. I assumed that main and nested tabs have some specific widths and do not have specific heights. In this case WebTab attempts to dynamically adjust its height according to height of content. The calculated value (offsetHeight) is applied to the content pane and outer html element of webtab. In this situation the changes within content of a tab-item (tab-item in nested WebTab) do not affect size of parent-WebTab, because that size is already in specific "px" with overflow.

The tab-item implements LayoutManager and exposes getClientWidth/Height methods. It means that application may process tab-change events within nested WebTab, get height of tab-item and adjust the height of parent WebTab accordingly. For example, if height of content in tab-item in child WebTab is 120px, the height of header/labels in child WebTab is 25px, the height of header/label of parent WebTab is 25px and thickness of top/bottom borders is 2px, then overall height of parent WebTab should be set to (120+25+25+2=172) px or larger value.

So, it is possible to publically synchronize height of parent WebTab and keep tab items in child WebTab fully visible. But in this case a change of selected item in main WebTab will lose ability to automatically adjust its height to the height of another tab item. Because height of main WebTab was already set to a specific value by events within nested WebTab. It means that application also should process selected-tab change events within main WebTab and do something. Unfortunately, WebTab does not allow to publically reset its height (can be considered as a feature request), so, application needs to use and reset internal variable _height0.

Below is example for you. You may copy/paste it in any aspx and test if it does what you would expect.

<script type="text/javascript">
function WebTab2_SelectedIndexChanged(sender, eventArgs) {
 var tab = sender.getTabAt(eventArgs.get_tabIndex());
 var height = tab ? tab.getClientHeight() : 0;
 // values below should be adjusted for specific theme and actual sizes of html elements
 // it is preferrable to slightly increase height: keep small gap at the bottom
 var tabHeaderHeight = 25, childTabHeaderHeight = 25, borders = 2;
 if (height) {
  $find('WebTab1').set_height((height + tabHeaderHeight + childTabHeaderHeight + borders) + 'px');
 }
}
function WebTab1_SelectedIndexChanging(sender, eventArgs) {
 // reset internal variable which keeps final height
 sender._height0 = null;
}
</script>

<ig:WebTab ID="WebTab1" runat="server" Width="80%">
     <Tabs>
      <ig:ContentTabItem runat="server" Text="Tab 1">
       <Template>
        <ig:WebTab ID="WebTab2" runat="server" Width="80%">
         <Tabs>
          <ig:ContentTabItem runat="server" Text="Tab 11">
           <Template>
            <div style="width:300px;height:300px;border:2px solid red;"></div>
           </Template>
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 12">
           <Template>
            <div style="width:400px;height:400px;border:2px solid blue;"></div>
           </Template>
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 13">
           <Template>
            <div style="width:600px;height:600px;border:2px solid yellow;"></div>
           </Template>
          </ig:ContentTabItem>
         </Tabs>
        <ClientEvents SelectedIndexChanged="WebTab2_SelectedIndexChanged" />
        </ig:WebTab>
       </Template>
      </ig:ContentTabItem>
      <ig:ContentTabItem runat="server" Text="Tab 2">
       <Template>
        <div style="width:400px;height:400px;border:2px solid orange;"></div>
       </Template>
      </ig:ContentTabItem>
     </Tabs>
     <ClientEvents SelectedIndexChanging="WebTab1_SelectedIndexChanging" />
</ig:WebTab>