Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Need CSS help with splitter

Answered Need CSS help with splitter

Feed from this thread
  • Itye avatar

    Posted on Dec 7, 2011 (permalink)

    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

    Reply

  • Answer Dobromir Dobromir admin's avatar

    Posted on Dec 7, 2011 (permalink)

    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

    Reply

  • Itye avatar

    Posted on Dec 8, 2011 (permalink)

    Worked like a charm.
    Thank you!

    Reply

  • Itye avatar

    Posted on Dec 8, 2011 (permalink)

    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

    Reply

  • Dobromir Dobromir admin's avatar

    Posted on Dec 8, 2011 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Need CSS help with splitter
Related resources for "Need CSS help with splitter"

[  ASP.NET Splitter Features   |  Documentation   |  Demos  |  Telerik TV   |  Self-Paced Trainer   |  Step-by-step Tutorial  ]