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

RadSplitter fullscreen oversize by 1px

3 Answers 172 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dédé
Top achievements
Rank 1
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

Sort by
0
Svetlina Anati
Telerik team
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:

<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.
0
Daniel
Top achievements
Rank 1
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" %>
<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>

0
Daniel
Top achievements
Rank 1
answered on 14 Jul 2010, 08:02 PM
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. 

Tags
Splitter
Asked by
Dédé
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or