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

RadPane is sizing beyond browser border

1 Answer 57 Views

Splitter

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

Mark van Dijk asked on 19 Oct 2009, 09:48 PM

Hi,

I have a very strange problem with a nested splitter.
First I use a splitter to create a topPane and a contentPane.
Then the contentPane is split into a leftPane and rightPane.
The leftPane has a MinWidth of 300 and a MaxWidth of 800.
Scrolling of the parent pane is set to none.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTest.aspx.cs" Inherits="TestSite.SplitterTest" %> 
        
            <%@ 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 runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                    html, body, form   
        
                    {  
        
                        height: 100%;  
        
                        margin: 0;  
        
                        padding: 0;  
        
                        overflow: hidden;  
        
                        font: normal 14px/1.5em "Segoe UI", Arial, sans-serif;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal">  
        
                        <telerik:RadPane ID="topPane" runat="server" Height="48px">  
        
                            Header pane  
        
                        </telerik:RadPane> 
        
                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" /> 
        
                        <telerik:RadPane ID="contentPane" runat="server" Scrolling="None">  
        
                            <telerik:RadSplitter ID="RadSplitter2" runat="server">  
        
                                <telerik:RadPane ID="leftPane" runat="server" Scrolling="None" 
        
                                    MinWidth="300" MaxWidth="800" Width="500">  
        
                                    Left pane  
        
                                </telerik:RadPane> 
        
                                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" /> 
        
                                <telerik:RadPane ID="rightPane" runat="server" Scrolling="None">  
        
                                    Right pane<br /> 
        
                                    1a 1b 1c 1d 1e 1f 1g 1h 1i 1j 1k 1l 1m 1n 1o 1p 1q 1r 1s 1t 1u 1v 1w 1x 1y 1z   
        
                                    2a 2b 2c 2d 2e 2f 2g 2h 2i 2j 2k 2l 2m 2n 2o 2p 2q 2r 2s 2t 2u 2v 2w 2x 2y 2z   
        
                                    3a 3b 3c 3d 3e 3f 3g 3h 3i 3j 3k 3l 3m 3n 3o 3p 3q 3r 3s 3t 3u 3v 3w 3x 3y 3z   
        
                                    4a 4b 4c 4d 4e 4f 4g 4h 4i 4j 4k 4l 4m 4n 4o 4p 4q 4r 4s 4t 4u 4v 4w 4x 4y 4z   
        
                                    5a 5b 5c 5d 5e 5f 5g 5h 5i 5j 5k 5l 5m 5n 5o 5p 5q 5r 5s 5t 5u 5v 5w 5x 5y 5z   
        
                                    6a 6b 6c 6d 6e 6f 6g 6h 6i 6j 6k 6l 6m 6n 6o 6p 6q 6r 6s 6t 6u 6v 6w 6x 6y 6z   
        
                                    7a 7b 7c 7d 7e 7f 7g 7h 7i 7j 7k 7l 7m 7n 7o 7p 7q 7r 7s 7t 7u 7v 7w 7x 7y 7z  
        
                                    8a 8b 8c 8d 8e 8f 8g 8h 8i 8j 8k 8l 8m 8n 8o 8p 8q 8r 8s 8t 8u 8v 8w 8x 8y 8z  
        
                                    9a 9b 9c 9d 9e 9f 9g 9h 9i 9j 9k 9l 9m 9n 9o 9p 9q 9r 9s 9t 9u 9v 9w 9x 9y 9z  
        
                                </telerik:RadPane> 
        
                            </telerik:RadSplitter> 
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTest.aspx.cs" Inherits="TestSite.SplitterTest" %>
<%@ 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 runat="server">
<title></title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font: normal 14px/1.5em "Segoe UI", Arial, sans-serif;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal">
<telerik:RadPane ID="topPane" runat="server" Height="48px">
Header pane
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" />
<telerik:RadPane ID="contentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="RadSplitter2" runat="server">
<telerik:RadPane ID="leftPane" runat="server" Scrolling="None"
MinWidth="300" MaxWidth="800" Width="500">
Left pane
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
<telerik:RadPane ID="rightPane" runat="server" Scrolling="None">
Right pane<br />
1a 1b 1c 1d 1e 1f 1g 1h 1i 1j 1k 1l 1m 1n 1o 1p 1q 1r 1s 1t 1u 1v 1w 1x 1y 1z
2a 2b 2c 2d 2e 2f 2g 2h 2i 2j 2k 2l 2m 2n 2o 2p 2q 2r 2s 2t 2u 2v 2w 2x 2y 2z
3a 3b 3c 3d 3e 3f 3g 3h 3i 3j 3k 3l 3m 3n 3o 3p 3q 3r 3s 3t 3u 3v 3w 3x 3y 3z
4a 4b 4c 4d 4e 4f 4g 4h 4i 4j 4k 4l 4m 4n 4o 4p 4q 4r 4s 4t 4u 4v 4w 4x 4y 4z
5a 5b 5c 5d 5e 5f 5g 5h 5i 5j 5k 5l 5m 5n 5o 5p 5q 5r 5s 5t 5u 5v 5w 5x 5y 5z
6a 6b 6c 6d 6e 6f 6g 6h 6i 6j 6k 6l 6m 6n 6o 6p 6q 6r 6s 6t 6u 6v 6w 6x 6y 6z
7a 7b 7c 7d 7e 7f 7g 7h 7i 7j 7k 7l 7m 7n 7o 7p 7q 7r 7s 7t 7u 7v 7w 7x 7y 7z
8a 8b 8c 8d 8e 8f 8g 8h 8i 8j 8k 8l 8m 8n 8o 8p 8q 8r 8s 8t 8u 8v 8w 8x 8y 8z
9a 9b 9c 9d 9e 9f 9g 9h 9i 9j 9k 9l 9m 9n 9o 9p 9q 9r 9s 9t 9u 9v 9w 9x 9y 9z
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>

The strange behavior happens when I set the Width for the leftPane to 500. The text of the rightPane will extent outside visible range (some items of the sequence in the rightPane are not visible).
If I remove the Width property, or make the Width equal to MinWidth (300) all text is visible.
We want the left pane to have a initial Width of 500. How can this be done?

Using version 2009.2.701.35

Thanks,
Mark

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadPane is sizing beyond browser border

1 Answer, 1 is accepted