[Solved] splitter inside tabstrip issues (vb)

[Donna Stewart]

I am trying to use a splitter with 2 panes in horizontal orientation on one of the tabs inside a tabstrip.  When I switch to that tab, the splitter and contents are displayed, but pane 2 is on top of pane 1.  I can move the splitbar and make things look right, but I have no idea how to have it start out that way.  I would like for each pane to take up half the window.  I've tried setting the size of the first pane to 50% and to 360px, but that is not working.  Here is the rendered html from FireBug:

<form id="add-webitems-form" method="post" action="/User/AddWebItemsForUser">
<div id="WebItemsTabStrip" class="t-widget t-tabstrip t-header">
<ul class="t-reset t-tabstrip-items">
<div id="WebItemsTabStrip-1" class="t-content" style="height: 630px; display: none;">
<div id="WebItemsTabStrip-2" class="t-content" style="height: 630px; display: none;">
<div id="WebItemsTabStrip-3" class="t-content t-state-active" style="height: 630px; display: block;">
<div id="WTGSplitter" class="t-widget t-splitter-horizontal t-splitter" style="height: 625px;">
<div class="t-pane t-scrollable" style="position: absolute; top: 0px; height: 625px; left: 0px;">
<div class="t-splitbar t-state-default t-splitbar-horizontal t-splitbar-draggable-horizontal" style="height: 625px; left: 0px;">
<div class="t-pane t-scrollable" style="position: absolute; top: 0px; height: 625px; left: 0px;">
</div>
</div>
<div id="WebItemsTabStrip-4" class="t-content" style="height:630px;">
<div id="WebItemsTabStrip-5" class="t-content" style="height:630px;">
</div>
</form>

I have attached a screen shot showing the issue.  I would appreciate your help very much!

Thanks,
Donna

[Dimo]

Hello Donna,

The Splitter cannot adjust its layout if it is initialized inside a container with a display:none style (such as inactive tabs), because Javascript size calculations don't work at that moment. I can suggest you to refresh the Splitter's layout once its parent tab is selected. Use the TabStrip's OnSelect event and execute the Splitter's resize method with  setTimeout.

Regards,
Dimo
the Telerik team

[Donna Stewart]

Ok - that makes sense.  I actually added code that either expands or collapses based on certain criteria and that works as well as the resize.  Thank you very much!
Donna