Panes stetching outside of the window size

2 posts, 0 answers
  1. Kasia
    Kasia avatar
    6 posts
    Member since:
    Jun 2009

    Posted 24 Jul 2009 Link to this post

    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" "">   
    <html xmlns="">    
    <head id="Head1" runat="server">    
        <title>Untitled Page</title>   
        <style type="text/css">  
        margin: 0;    
        height: 100%;    
        border: 0;    
        padding: 0;    
        overflow: hidden;    
    #rsMain {margin:10px;}  
    #rpBody {padding:10px; }  
    <form id="form1" runat="server">   
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">   
       <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">  
            <telerik:RadSplitBar Id="splitbar" runat="server"/>  
            <telerik:RadPane ID="rpRight" runat="server">  
        <telerik:RadPane ID="rpFooter" runat="server" Height="30" BackColor="Blue">Footer</telerik:RadPane> 
  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jul 2009 Link to this post

    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

    #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.

    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.
Back to Top