Width % problem with splitter in tab/Pageview

5 posts, 0 answers
  1. Bill
    Bill avatar
    2 posts
    Member since:
    Mar 2008

    Posted 21 Mar 2010 Link to this post

    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> 
     

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 24 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill
    Bill avatar
    2 posts
    Member since:
    Mar 2008

    Posted 24 Mar 2010 Link to this post

    That did it. Thanks!
  5. Tamer Gamal
    Tamer Gamal avatar
    4 posts
    Member since:
    May 2010

    Posted 14 Jul 2011 Link to this post

    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>
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Jul 2011 Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017