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

Sliding Pane appearing under RadDock in Splitter

1 Answer 147 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Aron Calder
Top achievements
Rank 1
Aron Calder asked on 28 Apr 2007, 03:20 AM
Hi Telerik,

I've got a splitter with a sliding pane on the left and a RadDock in the main Pane. When the sliding pane slides out it appears under the dock control.

I tried the same code using 2007 Q1 of RadControls and it works correctly with the sliding pane appearing on top of the RadDock.

Here is the code I'm using with Prometheus.

<telerik:RadSplitter id="RadSplitter1" runat="server" width="700" height="500">  
                <telerik:RadPane id="LeftPane" runat="server" width="22" scrolling="none">  
                    <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22">  
                        <telerik:RadSlidingPane id="RadSlidingPane1" title="Pane1" runat="server" width="150">  
                        Pane 1 Content  
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane id="Radslidingpane2" title="Pane2" runat="server" width="150">   
                        Pane 2 Content  
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane id="Radslidingpane3" title="Pane3" runat="server" width="150">  
                        Pane 3 Content  
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
                <telerik:RadSplitBar id="Radsplitbar1" runat="server" ></telerik:RadSplitBar> 
                <telerik:RadPane id="MiddlePane1" runat="server" Scrolling="None">  
                    <telerik:raddocklayout runat="server" id="RadDockLayout1">  
                        <telerik:raddockzone runat="server" id="RadDockZone1" width="300" MinHeight="200" height="100%" style="float:left;margin-right:15px;background: #f5f4e8;">  
                        </telerik:raddockzone> 
                        <telerik:raddockzone runat="server" id="RadDockZone2" width="300" MinHeight="200" height="100%" style="background: #d5f0fa;float:left;">  
                        </telerik:raddockzone> 
                    </telerik:raddocklayout> 
                </telerik:RadPane>   
            </telerik:RadSplitter> 

Any suggestions on why it doesn't work in Prometheus?

Cheers

Aron

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 02 May 2007, 10:38 AM
Hello Aron,
We are aware of this issue. In order to achieve the desired behavior, please place the following style definitions in the HEAD of your page:

    <style type="text/css">  
      
        .DockRadPane{position:relative;}         
        #LeftPane{position:relative;z-index:2;}  
          
        @media screen and (min-width: 550px)  
        {  
            .raddockzone,.DockRadPane{position:static !important}  
            #LeftPane{display:block;float:left;}  
         }  
           
    </style> 

and apply the "DockRadPane" style to the RadPane, containing the RadDockZone-s. Note that the "LeftPane" style has the ClientID of the RadPane, containing the RadSlidingZone. In case, you do not want to use the ClientID of the RadPane, you can apply the same class, by means of javascript:

<head runat="server">  
    <title>Untitled Page</title>  
    <style type="text/css">  
      
        .DockRadPane{position:relative;}         
        .LeftPane{position:relative;z-index:2;}  
          
        @media screen and (min-width: 550px)  
        {  
            .raddockzone,.DockRadPane{position:static !important}  
            .LeftPane{display:block;float:left;}  
         }  
           
    </style>  
</head>  
<body>  
    <script type="text/javascript">  
    function Test(splitter, args)  
    {  
        window.setTimeout(function()  
        {  
            var splitter = $find("<%= RadSplitter1.ClientID %>");  
            var pane = splitter.GetPaneById('LeftPane');  
            pane.GetContentElement().parentNode.className += ' LeftPane';  
        }, 10);  
    }  
      
    </script> 

In this case, just execute the Test function, when the RadSplitter is loaded (OnClientLoaded).

Sincerely yours,
Tsvetie
the telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Splitter
Asked by
Aron Calder
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or