Need CSS help with splitter

5 posts, 1 answers
  1. Itye
    Itye avatar
    6 posts
    Member since:
    Jul 2011

    Posted 07 Dec 2011 Link to this post

    Hello Telerik,

    I have quite a simple splitter, which makes scrollbars after you move the splitter. (before that it is ok with no scrollbars).
    It happens only on Firefox and Chrome. Surprisingly, i.e. seems to manage it nicely.

    I guess it is a styling issue.

    here is the code (simple aspx with no code behind):
    <%@ Page Language="C#" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
    </script>
     
    <head id="Head1" runat="server">
    <title></title>
    <style>
    html, body, form
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    body
    {
        background-color:#FFFFFF;
        font-size:12px;
        font-family:Arial;
        direction:rtl;
    }
       #main
        {
            height: 100%
        }
    </style>
    </head>
    <body>
        <form id="form2" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                </Scripts>
            </asp:ScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableOutsideScripts="true" EnablePageHeadUpdate="False"> </telerik:RadAjaxManager>
            <div id="main">
                    <asp:Panel runat="server" Height="45">
                        header    
                    </asp:Panel>
                    <asp:Panel runat="server"  Height="100%">
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                        <telerik:RadSplitter ID="NestedSplitter" runat="server"  LiveResize="true" Height="100%" Width="100%">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                main menu
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Backward" />
                             <telerik:RadPane ID="ContentPane" runat="server">
                                 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                                    <telerik:RadSplitter ID="MainSplitter" runat="server"  Height="100%"  Width="100%" Orientation="Horizontal">
                                        <telerik:RadPane ID="TopPane" runat="server" Scrolling="Y" Height="30%" MinHeight="100" CssClass="TopPane">
                                            top content
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                                        <telerik:RadPane ID="MainPane" runat="server" Scrolling="Y" Height="70%">
                                            edit content
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>
                                </telerik:RadAjaxPanel>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </asp:Panel>
            </div>
        </form>
    </body>
    </html>

    What do you advice to change?

    Many thanks,
     -Itye
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 07 Dec 2011 Link to this post

    Hello Itye,

    To avoid this issue you need to disable the scrolling of the pane containing the nested splitter (RadPane with ID="ContentPane"). To do so you need to set the Scrolling property to None, e.g.:
    <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">


    Kind regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Itye
    Itye avatar
    6 posts
    Member since:
    Jul 2011

    Posted 08 Dec 2011 Link to this post

    Worked like a charm.
    Thank you!
  5. Itye
    Itye avatar
    6 posts
    Member since:
    Jul 2011

    Posted 08 Dec 2011 Link to this post

    As your answer did solve the question I have asked, another problem arose:
    when a long content appears, the bottom scrolling  button is hidden.
    Code to demonstrate: I have added an "orange" div with height:1000px. the lower part of the div is not reachable, and scroll bar is somewhat not displayed correctly.

    <%@ Page Language="C#" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
    </script>
     
    <head id="Head1" runat="server">
    <title></title>
    <style>
    html, body, form
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    body
    {
        background-color:#FFFFFF;
        font-size:12px;
        font-family:Arial;
        direction:rtl;
    }
       #main
        {
            height: 100%
        }
    </style>
    </head>
    <body>
        <form id="form2" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                </Scripts>
            </asp:ScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableOutsideScripts="true" EnablePageHeadUpdate="False"> </telerik:RadAjaxManager>
            <div id="main">
                    <asp:Panel runat="server" Height="45">
                        header    
                    </asp:Panel>
                    <asp:Panel runat="server"  Height="100%">
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                        <telerik:RadSplitter ID="NestedSplitter" runat="server"  LiveResize="true" Height="100%" Width="100%">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                main menu
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Backward" />
                             <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
                                 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                                    <telerik:RadSplitter ID="MainSplitter" runat="server"  Height="100%"  Width="100%" Orientation="Horizontal">
                                        <telerik:RadPane ID="TopPane" runat="server" Scrolling="Y" Height="30%" MinHeight="100" CssClass="TopPane">
                                            top content
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                                        <telerik:RadPane ID="MainPane" runat="server" Scrolling="Y" Height="70%">
                                            <div style="height:1000px;background-color:Orange;margin:10px;">edit content</div>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>
                                </telerik:RadAjaxPanel>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </asp:Panel>
            </div>
        </form>
    </body>
    </html>

    Do you have another magic?

    Thanks,
    - itye
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Dec 2011 Link to this post

    Hi Itye,

    This particular issue is due to the specific layout, and you can observe the same behavior even without the splitter on the page. The problem comes from the fact that an element (in the provided page the ASP:Panel wrapping the splitter) have set height to 100% and it is not the only child of the parent element:
    <div id="main">
            <asp:Panel runat="server" Height="45">
                header   
            </asp:Panel>
            <asp:Panel runat="server"  Height="100%">

    You can observe this same behavior using the following sample HTML:
    <div style="width: 500px; height: 800px; border:5px solid red">
        <div style="height: 50px;"></div>
        <div style="height:100%;background: yellow;"></div>
    </div>

    In order to avoid this issue I would recommend you to use another splitter to separate the two panels in two different RadPanes, e.g.:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
            body
            {
                background-color: #FFFFFF;
                font-size: 12px;
                font-family: Arial;
                direction: rtl;
            }
            #main
            {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form2" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableOutsideScripts="true"
            EnablePageHeadUpdate="False">
        </telerik:RadAjaxManager>
        <div id="main">
            <telerik:RadSplitter ID="WrapperSplitter" runat="server" Width="100%" Height="100%"
                Orientation="Horizontal">
                <telerik:RadPane ID="HeaderPane" runat="server" Height="45px">
                    <asp:Panel ID="Panel1" runat="server" Height="45">
                        header
                    </asp:Panel>
                </telerik:RadPane>
                <telerik:RadPane ID="MainPane" runat="server">
                    <asp:Panel ID="Panel2" runat="server" Height="100%">
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true" Height="100%"
                            Width="100%" ResizeWithParentPane="false">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200px" MinWidth="150" MaxWidth="400">
                                main menu
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Backward" />
                            <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
                                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                                    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
                                        Orientation="Horizontal">
                                        <telerik:RadPane ID="TopPane" runat="server" Scrolling="Y" Height="30%" MinHeight="100"
                                            CssClass="TopPane">
                                            top content
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                                        <telerik:RadPane ID="RadPane1" runat="server" Scrolling="Y" Height="70%">
                                            <div style="height: 1000px; background-color: Orange; margin: 10px;">
                                                edit content</div>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>
                                </telerik:RadAjaxPanel>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </asp:Panel>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    I hope this helps.

    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017