This is a migrated thread and some comments may be shown as answers.

Width % problem with splitter in tab/Pageview

4 Answers 183 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Bill asked on 21 Mar 2010, 05:08 PM

I am attempting to use the splitter control inside a tab but the width is defaulting to a fixed value (398px) rather than the 100% width I've specified. I am using Q1 2010... When I view the generated HTML the <div/> tags for the splitter container and each pane all have a style attribute that specifies width:398px. Any help would be greatly appreciated! Here is a sample page that illustrates what is happening:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dialog.aspx.cs" Inherits="TelerikTester.Dialog" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">   
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Dialog</title> 
        
                <style type="text/css"> 
        
            html, body, form  
        
            { 
        
                margin:0; 
        
                padding:0; 
        
                height: 100%;  
        
                width: 100%; 
        
            } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server" submitdisabledcontrols="true"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="AjaxManager1" runat="server" /> 
        
            <telerik:RadSplitter ID="spltMain" runat="server" Width="100%" Height="100%" Orientation="Horizontal" BorderSize="0" BorderStyle="None"> 
        
            <telerik:RadPane ID="rpHeader" runat="server" Height="60px" MaxHeight="60" Locked="true" Scrolling="None"> 
        
            Header 
        
            </telerik:RadPane> 
        
            <telerik:RadPane ID="rpTabs" runat="server" height="25px" MaxHeight="25" Locked="true"> 
        
            <div style="height: 100%; vertical-align: bottom;"> 
        
            <telerik:RadTabStrip ID="rtsDialog" runat="server" Skin="Black" EnableEmbeddedSkins="true" MultiPageID="rmpDialog" SelectedIndex="0"> 
        
                <Tabs> 
        
                    <telerik:RadTab Text="Tab1" Value="Tab1" Selected="true" PageViewID="rpvTab1" /> 
        
                    <telerik:RadTab Text="Tab2" Value="Tab2" PageViewID="rpvTab2" /> 
        
                </Tabs> 
        
            </telerik:RadTabStrip> 
        
            </div> 
        
            </telerik:RadPane> 
        
            <telerik:RadPane ID="rpBody" runat="server" Scrolling="None"> 
        
            <telerik:RadMultiPage ID="rmpDialog" runat="server" Width="99%" Height="98%" ScrollBars="Vertical" SelectedIndex="0" RegisterWithScriptManager="true" 
        
                    BorderStyle="Solid" BorderWidth="1" BorderColor="#333333" > 
        
                <telerik:RadPageView ID="rpvTab1" runat="server" Height="100%"> 
        
                <asp:Panel ID="pnlTab1" runat="server"> 
        
                    Tab1 
        
                </asp:Panel> 
        
                </telerik:RadPageView> 
        
                <telerik:RadPageView ID="rpvTab2" runat="server"> 
        
                    <telerik:RadSplitter ID="splitTab2" runat="server" Width="100%" Orientation="Horizontal"> 
        
                        <telerik:RadPane ID="paneTab2Filter" runat="server" Width="100%" MaxHeight="200" Scrolling="None"> 
        
                            Filter 
        
                        </telerik:RadPane> 
        
                        <telerik:RadSplitBar ID="barTab2" runat="server" CollapseMode="Both" Visible="true" Width="100%" /> 
        
                        <telerik:RadPane ID="paneTab2Grid" runat="server" Scrolling="None" Width="100%"> 
        
                            Grid 
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </telerik:RadPageView> 
        
            </telerik:RadMultiPage> 
        
            </telerik:RadPane> 
        
            </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

4 Answers, 1 is accepted

answered on 24 Mar 2010, 12:09 PM

Hi Bill,
In this case, you should set ResizeWithParentPane=false for the nested splitter control:

<telerik:RadPageView ID="rpvTab2" runat="server">

<telerik:RadSplitter ID="splitTab2" runat="server" Width="100%" Orientation="Horizontal"

ResizeWithParentPane="false">

<telerik:RadPane ID="paneTab2Filter" runat="server" Width="100%" MaxHeight="200"

Scrolling="None">

Filter

</telerik:RadPane>

<telerik:RadSplitBar ID="barTab2" runat="server" CollapseMode="Both" Visible="true"

Width="100%" />

<telerik:RadPane ID="paneTab2Grid" runat="server" Scrolling="None" Width="100%">

Grid

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPageView>

By default, the value of this property is "true" and the parent pane controls the size of the nested splitter. However, as the nested splitter is not a direct child of its parent pane, it should calculate its own size and not expect its parent pane to handle it.

Kind regards,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 14 Jul 2011, 12:51 PM

that solution didn't work in chrome
try this sample with even ResizeWithParentPane="false
the inner pane(RadPane1) don't apply the width ,i set it with 50% but it take over 100%

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="test" runat="server">

<telerik:RadSplitter ID="RadSplitter2" runat="server">

<telerik:RadPane ID="RadPane3" runat="server">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"

SelectedIndex="0">

<Tabs>

<telerik:RadTab Text="First">

</telerik:RadTab>

<telerik:RadTab Text="Second">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="80%" SelectedIndex="0"

BorderColor="#91A7B4" BackColor="#F4F4F0" BorderStyle="Solid" BorderWidth="1px"

Height="80%">

<telerik:RadPageView ID="PV_Help" runat="server">

<div style="margin: 10px; padding: 10px;">

help text here

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="PV_Administrative" runat="server">

<telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithParentPane="false"

Height="100%" Width="100%">

<telerik:RadPane ID="RadPane1" runat="server" Width="50%" BackColor="Red">

asdasdfadsf

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPane>

<telerik:RadPane ID="RadPane4" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

</asp:Content>

answered on 18 Jul 2011, 03:27 PM

Hi Tamer,

In order to configure RadSplitter to use percentage values for its Height property you need to make sure that all its parent elements have set height - in your scenario the RadPageView does not have set Height and this is causing the splitter to incorrectly calculates its size.

To fix this issue you need to set the Height property to the RadPageView containing the nested splitter, e.g.:

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="80%" SelectedIndex="0"

BorderColor="#91A7B4" BackColor="#F4F4F0" BorderStyle="Solid" BorderWidth="1px"

Height="80%">

<telerik:RadPageView ID="PV_Help" runat="server" Height="300px">

<div style="margin: 10px; padding: 10px;">

help text here

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="PV_Administrative" runat="server" Height="300px">

<telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithParentPane="false"

Height="100%" Width="100%">

Regards,
Dobromir
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!