Can't get it to lay out properly

[rwozniak]

I'm trying to achieve a very simple layout with a header on the top of the page and a splitter with 3 columns below. I've attached sample code below.

It lays out fine in Firefox...initially, but scrollbars appear when I resize the window.

In IE I always get scrollbars, though if I remove the 3 border properties on the outer splitter I don't get them initially, but do get them when I resize the window.

I'd like to also add a 1-pixel border along the top of the lower section, but when I add a border-top to either the bottom pane or the bottom splitter, the scrollbar problem gets worse.

 

<%

@ Page Language="C#" AutoEventWireup="true" %>

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

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

<

head id="Head1" runat="server">

 

<title>Test</title>

<style>

 

.header

 

{

background-color: green;

}

</style>

</

head>

<

body>

 

<form id="Form1" method="post" runat="server">

 

<asp:ScriptManager ID="ScriptManager1" runat="server" />

 

<telerik:RadSplitter id="topBottomSplitter" runat="server" Orientation="Horizontal" BorderStyle="None" BorderWidth="0"

BorderSize="0" FullScreenMode="true">

 

<telerik:RadPane id="topPane" CssClass="header" runat="server" Height="50px">

 

Header

</telerik:RadPane>

 

<telerik:RadPane id="bottomPane" runat="server">

 

<telerik:RadSplitter id="bottomSplitter" runat="server" Width="100%">

 

<telerik:RadPane id="BottomLeft" runat="server">

 

Left

</telerik:RadPane>

 

<telerik:RadSplitBar id="SplitterBarLeft" runat="server" collapsemode="Forward" />

 

<telerik:RadPane id="BottomCenter" runat="server" Width="50%">

 

Middle

</telerik:RadPane>

 

<telerik:RadSplitBar id="SplitterBarRight" runat="server" collapsemode="Backward" />

 

<telerik:RadPane id="BottomRight" runat="server">

 

Right

</telerik:RadPane>

 

</telerik:RadSplitter>

 

</telerik:RadPane>

 

</telerik:RadSplitter>

 

</form>

 

</

body>

</

html>

[rwozniak]

I seem to have found a solution, but I have no idea why.

I added a horizontal rule to the bottom pane and assigned a css class. This for some odd reason took care of some of the scrollbar issues as well. I then had to add overflow:hidden on the html tag in order to prevent a disabled scrollbar from appearing in IE.

Seems awfully kludgy, but as long as it works I'm happy. Just seems that the original code I posted should've worked without having to continue battling for several hours.

<%

@ Page Language="C#" AutoEventWireup="true" %>

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

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

<

head id="Head1" runat="server">

<title>Test</title>

<style>

html

{

overflow: hidden;

}

.header

{

background-color: green;

}

.topBorder

{

border: 0;

height: 1px;

position: absolute;

top: 50px;

z-index: 5;

width: 100%;

line-height: 0px;

color: blue;

background-color: blue;

margin: 0;

padding: 0;

}

</style>

</

head>

<

body>

<form id="Form1" method="post" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadSplitter id="topBottomSplitter" runat="server" Orientation="Horizontal" BorderStyle="None" BorderWidth="0"

BorderSize="0" FullScreenMode="true">

<telerik:RadPane id="topPane" CssClass="header" runat="server" Height="50px">

Header

</telerik:RadPane>

<telerik:RadPane id="bottomPane" runat="server">

<hr class="topBorder" />

<telerik:RadSplitter id="bottomSplitter" runat="server" Width="100%">

<telerik:RadPane id="BottomLeft" runat="server">

Left

</telerik:RadPane>

<telerik:RadSplitBar id="SplitterBarLeft" runat="server" collapsemode="Forward" />

<telerik:RadPane id="BottomCenter" runat="server" Width="50%">

Middle

</telerik:RadPane>

<telerik:RadSplitBar id="SplitterBarRight" runat="server" collapsemode="Backward" />

<telerik:RadPane id="BottomRight" runat="server">

Right

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</

body>

</

html>

[Svetlina Anati]

Hi rwozniak,

The described behavior occurs when you have a RadSplitter nested in a RadPane. In order to remove the undesired scrollbars you should set the parent RadPane's (bottomPane in your case) Scrolling property to None.

I also noticed that you have explicitly set the nested splitter's Width property to 100% - you do not need this setting, this is the default behavior when having this layout. Furthermore, this setting will cause additional calculations and will make the page slower, so I suggest to remove it.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[rwozniak]

Thanks very much for the suggestions.

Ross

[Malinda]

Hi

I believe that my question is related to this post, so thought of adding it here.

Is there a limitation for the number of splitters that could be nested one inside another?

Layout Example:

<telerik:RadSplitter Orientation="Vertical" Width="100%" Height="100%">
    <telerik:RadPane ID="RadPane8" runat="server" Height="100%" Width="3%">
        Some contents goes here
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane9" runat="server" Height="100%" Width="97%">
        <telerik:RadSplitter Orientation="Vertical" Width="100%" Height="100%">
            <telerik:RadPane ID="RadPane10" runat="server" Height="100%" Width="22%">
            Some Contents goes here
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane11" runat="server" Height="100%" Width="78%">
                <telerik:RadSplitter Orientation="Horizontal" Width="100%" Height="100%">
                    <telerik:RadPane ID="RadPane12" runat="server" Height="70%" Width="100%">
                    Some COntents goes here
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane13" runat="server" Height="30%" Width="100%">
                    Some COntents goes here
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>

When I have these attributes set, there is a javascript error poping up from splitters. anything I am doing wrong here?

Any solutions would be really helpful.

Thanks
Malinda

[Svetlina Anati]

Hello Malinda,

I prepared the following notes which can help you improve the code:

- Insert the following style in your page's head :

html, body, form
{
  height: 100%;
  margin: 0;
  padding: 0;
}

- If the outermost splitter is nested in another element (e.g DIV, TABLE, TR, TD, etc) set explicit height to all teh parent elements of the splitter

- 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 without any benefit.

- when you have a vertical RadSplitter, do not set the Height of the child RadPanes (the same for a horizontal splitter and width) due to the above explained performance consideration

- I suggest to set  VisibleDuringInit = "false" for your splitters - this will hide the initail resize of the splitters and you will get a better result.

I hope that my  notes are helpful and for your convenience I modified andpasted below the revised code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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;
}

</style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSplitter Orientation="Vertical" runat="server" Width="100%" Height="100%"
            VisibleDuringInit="false">
            <telerik:RadPane ID="RadPane8" runat="server" Width="3%">
                Some contents goes here
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane9" runat="server">
                <telerik:RadSplitter Orientation="Vertical" runat="server">
                    <telerik:RadPane ID="RadPane10" runat="server" Width="22%">
                        Some Contents goes here
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane11" runat="server">
                        <telerik:RadSplitter Orientation="Horizontal" runat="server">
                            <telerik:RadPane ID="RadPane12" runat="server" Height="70%">
                                Some COntents goes here
                            </telerik:RadPane>
                            <telerik:RadPane ID="RadPane13" runat="server">
                                Some COntents goes here
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>
</body>
</html>

Let me know how it goes and in case you need further assistance.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Malinda]

Thanks for your notes.

Removing additional widths and heights from the nested splitters did the job.