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

RadDockZones overlapping RadSlidingPane

6 Answers 89 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 07 Oct 2008, 01:33 PM
Hi

I have created a some Rad Sliding Panels.  I have a sliding pane on the left and right and a normal pane in the middle.

The left pane contains a RadPanelBar
The middle pane contains a RadDockLayout control which is being constructed in code.  The zones are being laid out in a ASP.NET Table.
The right pane contains a ASP.NET Table.

The left sliding panel works correctly.
When I expand the right Pane it appears over the RadDockZones in the RadDockLayout control.  But when  I pin the control the Sliding panel is overlayed by the Zones.

It works fine in Firefox, this is only happening in IE

Any ideas ?

Thanks

6 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 08 Oct 2008, 10:09 AM
Any ideas? :(
0
Svetlina Anati
Telerik team
answered on 10 Oct 2008, 10:00 AM
Hi Michael,

I prepared a sample reproduction project but unfortunately I was not able to observe the problem. I tested the project under IE6, IE7 and FF3 but the result under all these browsers was the same - please examine the attached screenshots. You said that the project works correctly under FF and under IE not and that is why I assume that it has something to do with position settings but since I cannot analyze the setup locally I am not able to help,.

Would you please modify my test project which is attached to the thread in order to reproduce the problem, open a new support ticket and send it to me along with detailed reproduction instructions and some screenshots? Once I receive it, I will do my best to help.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Michael
Top achievements
Rank 1
answered on 13 Oct 2008, 05:56 PM
Hi

I dont seem to be able to upload attachments.  Please find my edited code below:

I have laid out the DockZones using a table.  When you move the left splitter so the middle pane overlaps the right pane the zones overlap the textbox in the right hand pane.

Also, you will find a colour picker control in the right hand pane.  When you scroll down the color picker remains in its postion instead of scrolling.

Please help

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Untitled Page</title> 
    <style type="text/css">  
    html, body, form  
    {  
      height: 100%;  
      padding: 0px;  
      margin: 0px;  
    }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width=100Height=100%> 
            <telerik:RadPane ID="RadPane1" runat="server" Width="22">  
                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">  
                    <telerik:RadSlidingPane ID="slide1" runat="server">  
                      
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadPane ID="RadPane2" runat="server">  
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
                    <table> 
                        <tr> 
                            <td>   
                    <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">  
                        <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Height="300">  
                        </telerik:RadDock> 
                    </telerik:RadDockZone>                              
                            </td> 
                        </tr> 
                        <tr> 
                            <td>   
                    <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px" Width="300px">  
                        <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Height="300">  
                        </telerik:RadDock> 
                    </telerik:RadDockZone>                              
                            </td> 
                        </tr>                          
                    </table> 
 
                </telerik:RadDockLayout> 
            </telerik:RadPane> 
            <telerik:RadSplitBar id="Radsplitbar2" runat="server" collapsemode="Backward"  />      
            <telerik:RadPane ID="RadPane3" runat="server">  
                <asp:TextBox runat="server" ID="txtTest"></asp:TextBox> 
                <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                    <br /> 
                      
                    <br /> 
                                       <telerik:RadColorPicker ID="RadColorPicker1" runat="server"  ShowIcon="true" AutoPostBack="true">  
                                            </telerik:RadColorPicker>     
                                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                          
                                              
            </telerik:RadPane> 
        </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 
0
Michael
Top achievements
Rank 1
answered on 16 Oct 2008, 09:55 AM
Can anyone help ?
0
Svetlina Anati
Telerik team
answered on 16 Oct 2008, 04:34 PM
Hello Michael,

I am not quite sure what exactly you mean by "When you move the left splitter so the middle pane overlaps the right pane the zones overlap the textbox in the right hand pane." and also I did not see the RadSlidingPane to be overlapped by the RadDockZone. I prepared a test project based on your code and I assume that you mean that when you resize the RadPane, the RadDockZones stay above the adjacent RadPane. If I am right, in order to achieve teh desired behavior you should set relative position to the RadDockZones parent RadPane as shown below:

    <style type="text/css">     
    html, body, form     
    {     
      height: 100%;     
      padding: 0px;     
      margin: 0px;     
    }     
    .ApplyPosition  
    {  
       position: relative;  
    }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">  
            <telerik:RadPane ID="RadPane1" runat="server" Width="22">  
                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">  
                    <telerik:RadSlidingPane ID="slide1" runat="server">  
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadPane ID="RadPane2" runat="server" CssClass="ApplyPosition">  
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server"

The problem with the RadColorPicker behavior when the content is scrolled can be solved in exactly the same manner.

For your convenience I attached my test page to this thread. You can upload files only in support tickets and in order to be able to do so, just open such.

Greetings,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Michael
Top achievements
Rank 1
answered on 17 Oct 2008, 08:48 AM
Thanks so much for your time!

I was playing around with the Postioning but I must of been applying it to the wrong control.  My problem is now solved!!

Thank you :)
Tags
Splitter
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Svetlina Anati
Telerik team
Share this question
or