This is a migrated thread and some comments may be shown as answers.

Need CSS help with splitter

4 Answers 114 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

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>

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

<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

Accepted

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>

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

<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

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">

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

<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