Resize Problem With Splitters Inside Tabstrip

[James]

I have a problem with splitters which I resize using JavaScript (onload and onresize). The splitter is inside a Tabstrip/MutlipageView and resizes correctly on page load and resize event but if I resize the browser manually and then I change the selected tab the splitter inside that tab does not resize correctly. There are white spaces at the top and or bottom. Any help would be appreciated.

<rad:RadTabStrip ID="NavTabStrip" runat="server" BackColor="#fff701" MultiPageID="MainPageMP" CssClass="tabStrip" BorderStyle="None"
                    SelectedIndex="1" Height="20px" Width="100%" Skin="Vista">
                    <Tabs>
                        <rad:RadTab Text="Directory" PageViewID="DirectoryPV">
                        </rad:RadTab>
                        <rad:RadTab Text="Search" PageViewID="SearchPV">
                        </rad:RadTab>
                        <rad:RadTab Text="View" PageViewID="ViewerPV">
                        </rad:RadTab>
                    </Tabs>
            </rad:RadTabStrip>
            <rad:RadMultiPage ID="MainPageMP" runat="server"  SelectedIndex="1" BorderColor="Silver" style="width:100%;" BorderStyle="solid" BorderWidth="1px">
                    <rad:RadPageView ID="DirectoryPV" runat="server" style="width:100%;" BorderStyle="None" BorderWidth="0px">

                        <rad:RadSplitter ID="BrowserSplitter" runat="server" BorderSize="0" style="width:100%;" LiveResize="true" Height="100%"
                            Width="100%" ResizeWithParentPane="false" ResizeWithBrowserWindow="true">
                            <rad:RadPane ID="TreePane" runat="server" Scrolling="None" Width="157px" Height="100%" PanesBorderSize="0">
                                <rad:RadTreeView ID="RadTreeView1" runat="server" AccessKey="T" AutoPostBack="True"
                                    DragAndDrop="True" Height="100%" Skin="Vista" Width="100%">
                                    <CollapseAnimation Duration="100" Type="OutQuint" />
                                    <ExpandAnimation Duration="100" />
                                </rad:RadTreeView>
                            </rad:RadPane>
                            <rad:RadSplitBar ID="BrowserSplitBar" runat="server" Height="100%" SkinID="Telerik">
                            </rad:RadSplitBar>
                            <rad:RadPane ID="DirectoryPane" runat="server" EnableEmbeddedBaseStylesheet="False"  EnableEmbeddedSkins="False"
                             Index="0" Scrolling="None"  PanesBorderSize="0" width="100%" height="100%">
                                    <rad:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="True" AutoGenerateColumns="False"
                                        EnableAJAX="True" EnableAJAXLoadingTemplate="True" GridLines="None" Height="100%"
                                        OnUpdateCommand="RadGrid1_UpdateCommand" ShowStatusBar="True" Skin="Gray" Width="100%">
                                        <ClientSettings>
                                            <Selecting AllowRowSelect="true" />
                                        </ClientSettings>
                                        <MasterTableView CommandItemDisplay="Top" DataKeyNames="file_id" Width="100%">
                                            <CommandItemTemplate>
                                                <div style="padding: 10px 0px;">
                                                    Custom command item template
                                                    <asp:LinkButton ID="btnEditSelected" runat="server" CausesValidation="false" CommandName="EditSelected"
                                                        Style="vertical-align: bottom" Visible="<%# RadGrid1.EditIndexes.Count = 0 %>"> <img alt=""
                                        src="../../DataEditing/Img/Edit.gif"
                                        style="border:0px;vertical-align:middle;" /> Edit Selected Products</asp:LinkButton><asp:LinkButton
                                            ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible="<%# RadGrid1.EditIndexes.Count > 0 %>"> <img alt=""
                                        src="../../DataEditing/Img/Update.gif"
                                        style="border:0px;vertical-align:middle;" /> Update Products</asp:LinkButton><asp:LinkButton
                                            ID="btnCancel" runat="server" CausesValidation="false" CommandName="CancelAll"
                                            Visible="<%# RadGrid1.EditIndexes.Count > 0 OrElse RadGrid1.MasterTableView.IsItemInserted %>"> <img
                                        alt="" src="../../DataEditing/Img/Cancel.gif"
                                        style="border:0px;vertical-align:middle;" /> Cancel editing</asp:LinkButton><asp:LinkButton
                                            ID="LinkButton1" runat="server" CommandName="InitInsert" Visible="<%# Not RadGrid1.MasterTableView.IsItemInserted %>"> <img alt=""
                                        src="../../DataEditing/Img/AddRecord.gif"
                                        style="border:0px;vertical-align:middle;" /> Add new Product</asp:LinkButton><asp:LinkButton
                                            ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible="<%# RadGrid1.MasterTableView.IsItemInserted %>"> <img alt=""
                                        src="../../DataEditing/Img/Insert.gif"
                                        style="border:0px;vertical-align:middle;" /> Add this Product</asp:LinkButton><asp:LinkButton
                                            ID="lbtnDelete" runat="server" CausesValidation="false" CommandName="DeleteSelected"
                                            OnClientClick="javascript:return confirm('Delete all selected Products?')"> <img
                                        alt="" src="../../DataEditing/Img/Delete.gif"
                                        style="border:0px;vertical-align:middle;" /> Delete Selected Products</asp:LinkButton><asp:LinkButton
                                            ID="lbtnZip" runat="server" CommandName="Zip" OnClick="lbtnZip_Click" OnClientClick="GetSelectedItems(); return false;"> <img alt=""
                                        src="../../DataEditing/Img/Refresh.gif"
                                        style="border:0px;vertical-align:middle;" />Download and Zip</asp:LinkButton></div>
                                            </CommandItemTemplate>
                                            <Columns>
                                                <rad:GridTemplateColumn DataField="Id" HeaderText="Id" SortExpression="Id" UniqueName="Id"
                                                    Visible="False">
                                                    <ItemTemplate>
                                                        <asp:Label ID="idlabel" runat="server" Text='<%#Eval("file_id") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridTemplateColumn HeaderText="Type" SortExpression="Type" UniqueName="Type"
                                                    Visible="False">
                                                    <ItemTemplate>
                                                        <asp:Label ID="typelabel" runat="server" Text='<%#Eval("type") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridTemplateColumn HeaderText="Location" SortExpression="Location" UniqueName="Location"
                                                    Visible="False">
                                                    <ItemTemplate>
                                                        <asp:Label ID="locationlabel" runat="server" Text='<%#Eval("location") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridTemplateColumn DataField="filename" HeaderText="Name" SortExpression="Name"
                                                    UniqueName="Name">
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="btnLoad" runat="server" CssClass="filelink">
                                                            <asp:Image ID="icon" runat="server" />&#160;
                                                            <asp:Label ID="filelabel" runat="server" Text='<%#Eval("filename") %>'></asp:Label></asp:LinkButton>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridTemplateColumn DataField="description" HeaderText="Description" SortExpression="Description"
                                                    UniqueName="Description">
                                                    <ItemTemplate>
                                                        <asp:Label ID="descriptionlabel" runat="server" Text='<%#Eval("description") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridTemplateColumn HeaderText="Size" SortExpression="Size" UniqueName="Size">
                                                    <ItemTemplate>
                                                        <asp:Label ID="sizelable" runat="server" CssClass="filelink" Text='<%#Eval("description") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </rad:GridTemplateColumn>
                                                <rad:GridClientSelectColumn Display="false" Reorderable="False" UniqueName="ClientSelectColumn">
                                                    <HeaderStyle Width="20px"></HeaderStyle>
                                                </rad:GridClientSelectColumn>
                                                <rad:GridEditCommandColumn UniqueName="EditCommandColumn">
                                                </rad:GridEditCommandColumn>
                                            </Columns>
                                            <RowIndicatorColumn>
                                                <HeaderStyle Width="20px" />
                                            </RowIndicatorColumn>
                                            <ExpandCollapseColumn>
                                                <HeaderStyle Width="20px" />
                                            </ExpandCollapseColumn>
                                            <EditFormSettings EditFormType="WebUserControl" UserControlName="~/filecontrols/partialedit.ascx">
                                                <EditColumn UniqueName="EditCommandColumn1">
                                                </EditColumn>
                                            </EditFormSettings>
                                        </MasterTableView>
                                        <FilterMenu EnableTheming="True">
                                            <CollapseAnimation Duration="200" Type="OutQuint" />
                                        </FilterMenu>
                                    </rad:RadGrid>
                            </rad:RadPane>
                        </rad:RadSplitter>

                        </rad:RadPageView>
                    <rad:RadPageView ID="SearchPV" runat="server" style="width:100%;" BorderStyle="None" Width="100%" BorderWidth="0px"
                        Height="100%">
                        <rad:RadSplitter ID="SearchSplitter" runat="server" BorderSize="0" Height="100%"
                            Width="100%" LiveResize="True" ResizeWithParentPane="false" ResizeWithBrowserWindow="true" Skin="Telerik">
                            <rad:RadPane ID="SearchPane" runat="server" BorderStyle="None" BorderWidth="0px" PanesBorderSize="0"
                                Height="100%" Scrolling="None" Width="157px">
                                <rad:RadPanelBar ID="RadPanelBar1" runat="server" Width="157px" Skin="Default2006">
                                    <CollapseAnimation Duration="100" Type="None" />
                                    <Items>
                                        <rad:RadPanelItem runat="server" Text="OCR Search" Value="TemplatedItem">
                                            <ItemTemplate>
                                                <asp:TextBox ID="txtOcrSearch" runat="server" Width="100px"></asp:TextBox>
                                                <asp:Button ID="btnSearch" runat="server" Text="Search" />
                                            </ItemTemplate>
                                        </rad:RadPanelItem>
                                        <rad:RadPanelItem runat="server" Text="Text Search" Value="TemplatedItem2">
                                        </rad:RadPanelItem>
                                    </Items>
                                    <ExpandAnimation Duration="100" Type="None" />
                                </rad:RadPanelBar>
                            </rad:RadPane>
                            <rad:RadSplitBar ID="RadSplitBar4" runat="server" Height="100%" SkinID="Telerik" />
                            <rad:RadPane ID="ResultsPane" runat="server" BorderStyle="None" BorderWidth="0px"
                                Height="100%" Width="100%" PanesBorderSize="0" CssClass="ScrollingFix">
                                <rad:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="False" AllowMultiRowSelection="True"
                                    AllowPaging="True" EnableAJAX="True" EnableAJAXLoadingTemplate="True" GridLines="None"
                                    Height="100%" ShowStatusBar="True" Skin="Gray" Width="100%" AllowFilteringByColumn="True">
                                    <MasterTableView>
                                        <GroupByExpressions>
                                            <rad:GridGroupByExpression>
                                                <SelectFields>
                                                    <rad:GridGroupByField FieldAlias="Filename" FieldName="Filename"></rad:GridGroupByField>
                                                </SelectFields>
                                                <GroupByFields>
                                                    <rad:GridGroupByField FieldName="Filename"></rad:GridGroupByField>
                                                </GroupByFields>
                                            </rad:GridGroupByExpression>
                                        </GroupByExpressions>
                                        <RowIndicatorColumn>
                                            <HeaderStyle Width="20px" />
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn>
                                            <HeaderStyle Width="20px" />
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <rad:GridTemplateColumn DataField="Filename" HeaderText="File Name" SortExpression="Filename"
                                                UniqueName="Filename">
                                                <ItemTemplate>
                                                    <asp:LinkButton ID="btnOpen" runat="server" CssClass="filelink">
                                                        <asp:Image ID="Image1" runat="server" /><asp:Label ID="Label2" runat="server" Text='<%#Eval("Filename") %>'></asp:Label></asp:LinkButton></ItemTemplate>
                                            </rad:GridTemplateColumn>
                                            <rad:GridTemplateColumn DataField="Location" HeaderText="Location" SortExpression="Location"
                                                UniqueName="Location">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblLocation" runat="server" Text='<%#Eval("Location") %>'></asp:Label></ItemTemplate>
                                            </rad:GridTemplateColumn>
                                            <rad:GridTemplateColumn DataField="Page" HeaderText="Page" SortExpression="Page"
                                                UniqueName="Page">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblPage" runat="server" Text='<%#Eval("Page") %>'></asp:Label></ItemTemplate>
                                            </rad:GridTemplateColumn>
                                            <rad:GridTemplateColumn DataField="Summary" HeaderText="Summary" SortExpression="Summary"
                                                UniqueName="Summary">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblSummary" runat="server" Text='<%#Eval("Summary") %>'></asp:Label></ItemTemplate>
                                            </rad:GridTemplateColumn>
                                        </Columns>
                                    </MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True"
                                        AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True">
                                    </ClientSettings>
                                    <FilterMenu EnableTheming="True">
                                        <CollapseAnimation Duration="200" Type="OutQuint" />
                                    </FilterMenu>
                                    <HeaderContextMenu EnableTheming="True" Skin="Gray">
                                        <CollapseAnimation Duration="200" Type="OutQuint" />
                                    </HeaderContextMenu>
                                    <PagerStyle Mode="NumericPages"></PagerStyle>
                                </rad:RadGrid>
                            </rad:RadPane>
                        </rad:RadSplitter>
                    </rad:RadPageView>
                    <rad:RadPageView ID="ViewerPV" runat="server" style="width:100%;" BorderStyle="None" Width="100%" BorderWidth="0px"
                        Height="100%">
                        <rad:RadSplitter ID="ViewerSplitter" runat="server" BorderSize="0" Height="100%"
                            Width="100%" LiveResize="True" ResizeWithParentPane="false" ResizeWithBrowserWindow="true" Skin="Telerik">
                            <rad:RadPane ID="ThumbPane" runat="server" BorderStyle="None" BorderWidth="0px" Height="100%"
                                Scrolling="None" Width="157px" PanesBorderSize="0">
                                <cc1:WebThumbnailViewer ID="WebThumbnailViewer1" runat="server" Height="100%" Width="157px"
                                    ShowAnnotations="True" ViewerID="WebAnnotationViewer1" />
                            </rad:RadPane>
                            <rad:RadSplitBar ID="ThumbViewSplitbar" runat="server" SkinID="Telerik">
                            </rad:RadSplitBar>
                            <rad:RadPane ID="ContentPane" runat="server" BorderStyle="None" BorderWidth="0px"
                                Height="100%" Scrolling="none" Width="100%" PanesBorderSize="0">
                                <rad:RadSplitter ID="ContentSplitter" runat="server" Orientation="Horizontal" Height="100%"
                                    Width="100%" Skin="Telerik">
                                    <rad:RadPane ID="ToolPane" runat="server" BorderStyle="None" BorderWidth="0px" Height="28px"
                                        Scrolling="None" Width="100%">
                                        <rad:RadToolBar ID="ViewerToolBar" runat="server" Skin="Default2006" Width="100%"
                                            BorderStyle="None">
                                            <CollapseAnimation Duration="200" Type="OutQuint" />
                                            <Items>
                                                <rad:RadToolBarButton runat="server">
                                                    <ItemTemplate>
                                                        <asp:Label ID="Label_FileName" runat="server" Text="Label"></asp:Label>
                                                    </ItemTemplate>
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Pan Image" onclick="WebAnnotationViewer1.setMouseTool(MouseToolType.Pan);">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Zoom" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.None);WebAnnotationViewer1.setMouseTool(MouseToolType.ZoomIn , MouseToolType.ZoomOut);">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Button 7" IsSeparator="True">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Best Fit" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.BestFit);">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Fit to Width" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.FitToWidth);">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Full Size" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.None);WebAnnotationViewer1.setAutoZoom(1);">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 8">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Prev" onclick="prev(); return false;">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" onclick="nextPage(); return false;" Text="Next">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 9">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarDropDown runat="server" Text="DropDown 0">
                                                </rad:RadToolBarDropDown>
                                                <rad:RadToolBarDropDown runat="server" Text="DropDown 1">
                                                </rad:RadToolBarDropDown>
                                                <rad:RadToolBarButton runat="server" Text="Export" onclick="exportPages(); return false;">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 11">
                                                </rad:RadToolBarButton>
                                                <rad:RadToolBarButton runat="server" Text="Notes" onclick="showStickyNote();">
                                                </rad:RadToolBarButton>
                                            </Items>
                                        </rad:RadToolBar>
                                    </rad:RadPane>
                                    <rad:RadSplitBar ID="ToolViewSplitbar" runat="server" BorderStyle="None" Visible="false"
                                        EnableResize="False" SkinID="Telerik"></rad:RadSplitBar>
                                    <rad:RadPane ID="ViewerPane" runat="server" BorderStyle="None" BorderWidth="0px"
                                        Height="100%" Width="100%" scrolling=None>
                                        <cc2:WebAnnotationViewer ID="WebAnnotationViewer1" runat="server" Width="100%" Height="100%"
                                            BackColor="Silver" Centered="True" CssClass="ScrollingFix" AutoLinkThumbnailViewer="True" />
                                    </rad:RadPane>
                                </rad:RadSplitter>
                            </rad:RadPane>
                        </rad:RadSplitter></rad:RadPageView>
            </rad:RadMultiPage>

function resizeWindow()
             {
                 var documentObj = GetDocument();
                 var pageSize = documentObj.clientHeight;
                 var pageWidth= documentObj.clientWidth;

                 pageSize = AdjustHeight(pageSize,'footer');
                 pageSize = AdjustHeight(pageSize,'header');

                 var elem = document.getElementById("BodyDiv");
                 elem.style.height = pageSize + "px";
                 elem.style.width = pageWidth + "px";

                 var PaneSizeDir=pageSize;
                 PaneSizeDir = AdjustHeight(pageSize,'NavTabStrip');

                 var elem1 = document.getElementById("MainPageMP");
                 elem1.style.height = PaneSizeDir + "px";
                 elem1.style.width = pageWidth + "px";
}

[Svetlina Anati]

Hi James,

In case everything works fine except for when the tab is changed, I suggest to hook up the

OnClientTabSelected event of the tabstrip and execute the resize code there, too.

In case this does not help, please open a new support ticket and attached a fully runnable reproduction demo along with detailed explanations there.

Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.