RadSplitter which is 100% of the page and has margin applied
HOW-TO
RadSplitter which is 100% of the page and has margin applied
SOLUTION
In order to apply margin to a RadSplitter which is 100% you cannot simply set margin to it or padding to its parent due to the box model. In order to achieve the visual result of a margin with a 100% sized RadSplitter you should go through the following steps:
-
Configure the RadSplitter to be 100% of the page (set Width and Height 100% and also set explicit height to all its parent elements including the html, body and form)
-
Set the HeightOffset property to the resultant sum of the top and the bottom desired margin
-
Set the desired top margin to the RadSplitter's wrapper DIV element by using CSS
-
The 3 steps above will ensure the 100% size with vertical margin applied. To set the horizontal margin, set it as a padding of the body element.
Sample code which demonstrates the above explained approach is available below:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0px;
padding:0px;
overflow:hidden;
}
#RadSplitter1
{
margin-top: 15px;
}
</style>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server" style="background-color: Gray; padding: 0px 15px;">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" BorderSize="0"
Width="100%" Height="100%" Orientation="Horizontal" BackColor="Blue" HeightOffset="30">
<telerik:RadPane ID="RadPane1" runat="server" Width="100%" Height="150px" BackColor="red"
MinHeight="150" MinWidth="1000">
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server" BackColor="Yellow" MinWidth="1000">
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>