Can't get it to lay out properly

7 posts, 0 answers
  1. rwozniak
    rwozniak avatar
    47 posts
    Member since:
    Oct 2007

    Posted 11 Jul 2008 Link to this post

    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>


  2. rwozniak
    rwozniak avatar
    47 posts
    Member since:
    Oct 2007

    Posted 11 Jul 2008 Link to this post

    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>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 Jul 2008 Link to this post

    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
  5. rwozniak
    rwozniak avatar
    47 posts
    Member since:
    Oct 2007

    Posted 14 Jul 2008 Link to this post

    Thanks very much for the suggestions.

    Ross
  6. Malinda
    Malinda avatar
    10 posts
    Member since:
    Jul 2009

    Posted 18 Dec 2009 Link to this post

    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
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Dec 2009 Link to this post

    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">
    <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.
  8. Malinda
    Malinda avatar
    10 posts
    Member since:
    Jul 2009

    Posted 20 Dec 2009 Link to this post

    Thanks for your notes.

    Removing additional widths and heights from the nested splitters did the job.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017