Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Need CSS help with splitter

4 Answers 78 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Itye
Top achievements
Rank 1
Itye asked on 07 Dec 2011, 10:20 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 07 Dec 2011, 05:55 PM
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
0
Itye
Top achievements
Rank 1
answered on 08 Dec 2011, 09:31 AM
Worked like a charm.
Thank you!
0
Itye
Top achievements
Rank 1
answered on 08 Dec 2011, 10:37 AM
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
0
Dobromir
Telerik team
answered on 08 Dec 2011, 11:54 AM
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
Tags
Splitter
Asked by
Itye
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Itye
Top achievements
Rank 1
Share this question
or