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

[Solved] RadSplitter fullscreen oversize by 1px

3 Answers 224 Views

Splitter

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

Dédé asked on 25 May 2009, 07:12 AM

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 Answers, 1 is accepted

answered on 27 May 2009, 02:19 PM

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:

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.

answered on 14 Jul 2010, 07:13 PM

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" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>