RadSplitter fullscreen oversize by 1px

4 posts, 0 answers
  1. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 25 May 2009 Link to this post

    Hi,

    I am using a RadSplitter with Orientation="Horizontal" FullScreenMode="True" LiveResize="True".
    I have put 2 RadPane with 1 RadSplitBar, 1st pane locked.
    In the 2nd RadPane, I have put another RadSplitter with Orientation="Vertical" FullScreenMode="True" LiveResize="True"
    with 2 RadPane, 2nd pane has fixed width.

    When collapsing last pane, the bottom pane of first RadSplitter shows a horizontal scrollbar.
    It seams that the inner RadSplitter grows of 1px when collapsing.

    Here is the code I am using :

        <form id="form1" runat="server"> 
            <ajaxToolkit:ToolkitScriptManager ID="sm" runat="server" /> 
            <telerik:RadSplitter ID="globalsplit" runat="server" Orientation="Horizontal" FullScreenMode="True" LiveResize="True"> 
                <telerik:RadPane ID="globaltoolbar" runat="server" Locked="true"> 
                    <telerik:RadToolBar ID="toolbar" runat="server"> 
                        <Items> 
                            <telerik:RadToolBarButton Text="Item 1" /> 
                            <telerik:RadToolBarButton IsSeparator="true" /> 
                            <telerik:RadToolBarButton Text="Item 2" /> 
                        </Items> 
                    </telerik:RadToolBar> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="split1" runat="server" CollapseMode="None" /> 
                <telerik:RadPane ID="mainpan" runat="server"> 
                    <telerik:RadSplitter ID="mainSplit" runat="server" Orientation="Vertical"  
                        FullScreenMode="True" LiveResize="True"> 
                        <telerik:RadPane ID="contentPane" runat="server"> 
                            <p>Main place</p> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="mainSplitBar" runat="server" CollapseMode="Backward" /> 
                        <telerik:RadPane ID="schedulePan" runat="server" Width="260px" MinWidth="260" MaxWidth="260"> 
                                [Scheduler] 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
     
  3. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 27 May 2009 Link to this post

    Hello Damien,

    In order to correctly configure the layout and get the desired result  you should go through the following steps:

    Remove the FullScreenMode poperty from all the splitters. Set the outermost parent splitter's Width and Height properties to 100% and if it is nested in another element, e.g DIV, set explicitly iys height, too (do this for all the parent elements of the outest RadSplitter).

    Put the following style in the page's head section:

    <style>  
    html, body, form  
    {  
      height: 100%;  
      margin: 0px;  
      padding: 0px;  
    }  
    </style> 

    Do not set any sizes to the nested splitters if they are directly nested in a RadPane  - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance significantly. When you have a RadSplitter nested in a RadPane, you should set Scrolling=None for the parent pane in order to avoid double scrollbars.

    After I applied all this to your page, everything started working as expected and the problem disappearaed. For your convenience I pasted the modified markup below:

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        html, body, form  
        {  
          height: 100%;  
          margin: 0;  
          padding: 0;  
          overflow: hidden;  
        }  
          
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <telerik:RadSplitter ID="globalsplit" runat="server" Orientation="Horizontal" Width="100%" 
                Height="100%" LiveResize="True">  
                <telerik:RadPane ID="globaltoolbar" runat="server" Locked="true">  
                    <telerik:RadToolBar ID="toolbar" runat="server">  
                        <Items> 
                            <telerik:RadToolBarButton Text="Item 1" /> 
                            <telerik:RadToolBarButton IsSeparator="true" /> 
                            <telerik:RadToolBarButton Text="Item 2" /> 
                        </Items> 
                    </telerik:RadToolBar> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="split1" runat="server" CollapseMode="None" /> 
                <telerik:RadPane ID="mainpan" runat="server" Scrolling="None">  
                    <telerik:RadSplitter ID="mainSplit" runat="server" Orientation="Vertical" LiveResize="True">  
                        <telerik:RadPane ID="contentPane" runat="server">  
                            <p> 
                                Main place</p> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="mainSplitBar" runat="server" CollapseMode="Backward" /> 
                        <telerik:RadPane ID="schedulePan" runat="server" Width="260px" MinWidth="260" MaxWidth="260">  
                            [Scheduler]  
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 



    Regards,

    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Daniel
    Daniel avatar
    12 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    I'm having the same issue despite having set the overflow property to 100% as indicated.  I cannot seem to prevent the scrollbars from appearing. 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Lcs.Client.test" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <head id="Head1" runat="server">
        <title>LCS Portal</title>
        <style type="text/css">
            html, body, form
            {
                overflow: hidden;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
        <telerik:RadWindowManager runat="server" ID="rwm">
        </telerik:RadWindowManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="ralpDefault">
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" BackColor="White" Transparency="35"
            Skin="Office2007" />
        <telerik:RadAjaxPanel runat="server" ID="radAjaxPanel1">
            <telerik:RadSplitter Orientation="Horizontal" ID="masterSplitter" runat="server"
                Width="100%" Height="100%" VisibleDuringInit="false">
                <telerik:RadPane runat="server" ID="topToolbarPane" Height="32">
                    <telerik:RadToolBar ID="TopToolBar" runat="server" OnButtonClick="ToolBar_ButtonClick"
                        Width="100%" Skin="Office2007">
                        <Items>
                            <telerik:RadToolBarButton Text="Blah"/>
                        </Items>
                    </telerik:RadToolBar>
                </telerik:RadPane>
                <telerik:RadPane runat="server" ID="centerPane">
                    <telerik:RadSplitter runat="server" ID="contentSplitter" Orientation="Vertical">
                        <telerik:RadPane ID="ContentContainerPane" runat="server">
                            <telerik:RadSplitter Orientation="Vertical" runat="server" ID="contentInfoSplitter">
                                <telerik:RadPane runat="server" ID="masterContentPane">
                                    BLAH BLAH BLAH BLAH
                                </telerik:RadPane>
                                <telerik:RadSplitBar runat="server" ID="contentInfoSplitBar" CollapseMode="Backward" />
                                <telerik:RadPane runat="server" ID="contentInfoPane" Width="200px" MaxWidth="200"
                                    MinWidth="200">
                                    BLAH BLAH BLAH BLAH
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadPane runat="server" ID="bottomToolbarPane" Height="32">
                    <telerik:RadToolBar ID="BottomToolBar" runat="server" OnButtonClick="ToolBar_ButtonClick"
                        Width="100%" Skin="Office2007" dir="rtl">
                        <Items>
                            <telerik:RadToolBarButton Text="Blah Blah"/>
                        </Items>
                    </telerik:RadToolBar>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>

  7. Daniel
    Daniel avatar
    12 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    By simplifying the example above, I was able to determine two things and eliminate the problem

    1) I had an extra laying of nesting that was unnecessary
    2) By setting Scrolling="None" on the centerPane containing the contentInfoSplitter, I was able to remove the scroll bars. 

Back to Top