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

Problem with BorderSize="0" in Chrome/FF

2 Answers 77 Views

Splitter

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

Jacek asked on 18 Apr 2012, 10:25 AM

err-splitter-06-chrome.png

err-splitter-06-IE.png

Hi,

Simple page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm47.aspx.cs" Inherits="fTest.WebForm47" %>

<!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 runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" BorderSize="0" PanesBorderSize="0"

Skin="Office2010Silver">

<telerik:RadPane runat="server" ID="RadPane1" Width="350px" MaxWidth="350">

abc

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward" ResizeStep="50" />

<telerik:RadPane runat="server" ID="RadPane2" Width="350px" MaxWidth="350">

cde

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

but it renders incorrectly in Chrome (in IE it's fine) - please find attachments below.

I know I could set style directly (as described in Removing the border of RadSplitter panes and the RadSplitter) but the question remains in what scenario property BorderSize is actually working?

2 Answers, 1 is accepted

Accepted

answered on 18 Apr 2012, 10:37 AM

Hi Jacek,

The problem that you experience is due to the fact that you are trying to utilize RadSplitter to use percentage values for its Width / Height property, but its parent elements does not have set height. To avoid this problem you need to set style="height:100%" to the <div> element wrapping the splitter and the following CSS to the page to set height to the <html>, <body> and <form> elements:

html, body, form

{

margin: 0;

padding: 0;

height: 100%;

overflow: hidden;

}

Please review the following help article for more detailed information on this case:
Filling the Entire Page

Greetings,
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.