My problem is that when I set the enclosing splitter to 100% width and height (I would like to have everything resize automatically as the window size changes) everything stretches to the working area size instead of the parent element. Below is an example of my page.
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="panel.aspx.cs" Inherits="tests_panel" %> |
| <%@ 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>Untitled Page</title> |
| <style type="text/css"> |
| html, |
| body, |
| form |
| { |
| margin: 0; |
| height: 100%; |
| border: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| #rsMain {margin:10px;} |
| #rpBody {padding:10px; } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter ID="rsMain" runat="server" Orientation="Horizontal" Width="100%" Height="100%"> |
| <telerik:RadPane ID="rpHeader" runat="server" Height="30" BackColor="Green">Header</telerik:RadPane> |
| <telerik:RadPane ID="rpBody" runat="server" BackColor="yellow"> |
| <telerik:RadSplitter ID="body" runat="server"> |
| <telerik:RadPane ID="rpLeft" runat="server" Width="300"> |
| left |
| </telerik:RadPane> |
| <telerik:RadSplitBar Id="splitbar" runat="server"/> |
| <telerik:RadPane ID="rpRight" runat="server"> |
| right |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadPane ID="rpFooter" runat="server" Height="30" BackColor="Blue">Footer</telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </htm>l |
1 Answer, 1 is accepted
0
Hi Kasia,
The problem comes from the fact that you have set margin and padding and you should not do this - if you remove the following two styles
everything will start working as expected.
What you want to achieve is not possible in this manner. The described behavior is expected since this is how the box model works. In order to confirm this and also to demonstrate that this is not directly related to RadSplitter and RadControls I prepared a test page which uses a simple DIV element with the same configuration at the place of the splitter. Please, make the DIV fulfill your requirements (e.g use javascript) and after that you can just place the splitter with Width and Height set to 100% and you will get the desired result.
However, the RadSplitter provides a rich client side API and you can use it to get the desired result. What you need to do is to calculate teh desired size and set it through the API.
Greetings,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The problem comes from the fact that you have set margin and padding and you should not do this - if you remove the following two styles
| #rsMain {margin:10px;} |
| #rpBody {padding:10px; } |
everything will start working as expected.
What you want to achieve is not possible in this manner. The described behavior is expected since this is how the box model works. In order to confirm this and also to demonstrate that this is not directly related to RadSplitter and RadControls I prepared a test page which uses a simple DIV element with the same configuration at the place of the splitter. Please, make the DIV fulfill your requirements (e.g use javascript) and after that you can just place the splitter with Width and Height set to 100% and you will get the desired result.
However, the RadSplitter provides a rich client side API and you can use it to get the desired result. What you need to do is to calculate teh desired size and set it through the API.
Greetings,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.