Splitter Panes Slide Under RadTabStrip

5 posts, 0 answers
  1. Dennis
    Dennis avatar
    62 posts
    Member since:
    Oct 2007

    Posted 15 Nov 2007 Link to this post

    I am having a problem when defining sliding panes on the left side and putting a tab strip in the adjacent content pane. When the left pane slides, it slides under the tabs of the RadTabStrip. Any known issues and fixes? I tried to zOrder a couple of the div's, but that did not help. 

     

     
        <asp:ScriptManager ID="AjaxScriptManager" runat="Server" /> 
                  
        <TelerikWeb:RadSplitter ID="DesignerSplitter" Width="100%" Height="100%" Skin="Office2007" runat="server">  
          
            <TelerikWeb:RadPane ID="SlidingPaneLeft" Width="22" Scrolling="None" runat="server"  > 
              
                <TelerikWeb:RadSlidingZone ID="SlidingZoneLeft" Width="22" SlideDirection="Right" DockedPaneId="PaneToolbox" runat="server">  
                  
                    <TelerikWeb:RadSlidingPane id="PaneToolbox" title="Toolbox" width="250" runat="server">  
                      
                    </TelerikWeb:RadSlidingPane> 
                      
                     
                </TelerikWeb:RadSlidingZone> 
              
            </TelerikWeb:RadPane> 
              
          
            <TelerikWeb:RadPane id="DesignerPane" runat="server">  
              
                <div style="width: 100%;  overflow: hidden">  
                  
                <TelerikTabStrip:RadTabStrip ID="DesignerTabStrip" MultiPageID="DesignerTabContent" Skin="Office2007" SelectedIndex="0" Align="left" runat="server">  
                  
                    <Tabs> 
                      
                        <TelerikTabStrip:Tab Text="Designer"></TelerikTabStrip:Tab> 
                      
                        <TelerikTabStrip:Tab Text="HTML Preview"></TelerikTabStrip:Tab> 
     
                    </Tabs> 
                  
                </TelerikTabStrip:RadTabStrip>              
                  
                </div> 
              
                <div id="DesignerTabContentContainer" style="width: 100%; height: 600px; overflow: hidden">  
                  
                <TelerikTabStrip:RadMultiPage ID="DesignerTabContent" SelectedIndex="0" runat="server">  
                  
                    <TelerikTabStrip:PageView ID="PageDesigner" Width="100%" runat="server">  
                      
                        <div style="width: 100%; height: 100%; border: solid 1px black">  
                          
                            <TelerikTreeView:RadTreeView ID="DocumentTree" Width="100%" Height="100%" AutoPostBack="True" runat="server">  
     
                                <Nodes> 
                                  
                                  
                                </Nodes> 
                             
                            </TelerikTreeView:RadTreeView> 
                          
                        </div> 
                      
                    </TelerikTabStrip:PageView> 
                  
                    <TelerikTabStrip:PageView ID="PageHtmlPreview" Width="100%" runat="server">  
                              
                        <div style="width: 100%; height: 100%; overflow: scroll; border: solid 1px black;">  
     
                          
                        </div> 
                                          
                    </TelerikTabStrip:PageView> 
     
                </TelerikTabStrip:RadMultiPage>              
                  
                </div> 
     
              
            </TelerikWeb:RadPane> 
              
              
            <TelerikWeb:RadPane ID="SlidingPaneRight" Width="22" Scrolling="None" runat="server"  > 
              
                <TelerikWeb:RadSlidingZone ID="DesignerSlidingZone" Width="22" SlideDirection="left" DockedPaneId="PaneProperties" runat="server">  
                  
                    <TelerikWeb:RadSlidingPane id="PaneProperties" title="Properties" width="250" runat="server">  
                      
                    </TelerikWeb:RadSlidingPane> 
                      
                    <TelerikWeb:RadSlidingPane id="PaneData" title="Data" width="250" runat="server">  
                      
                    </TelerikWeb:RadSlidingPane> 
                      
                    <TelerikWeb:RadSlidingPane id="PaneStyles" title="Styles" width="250" runat="server">  
                      
                    </TelerikWeb:RadSlidingPane> 
                      
                </TelerikWeb:RadSlidingZone> 
              
            </TelerikWeb:RadPane> 
          
        </TelerikWeb:RadSplitter> 

     

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 15 Nov 2007 Link to this post

    Hi Dennis,
    You can use the following approach in order to get the desired behavior:
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">    
            html, body, form  
            {  
                height: 100%;  
            }      
                
            .ApplyPosition{position:relative;}               
            #RAD_SPLITTER_PANE_SlidingPaneLeft, #RAD_SPLITTER_PANE_SlidingPaneRight{position:relative;z-index:2;}        
              
              
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="AjaxScriptManager" runat="Server" /> 
            <telerikweb:RadSplitter ID="DesignerSplitter" Width="100%" Height="100%" 
                runat="server">  
                <telerikweb:RadPane ID="SlidingPaneLeft" Width="22" Scrolling="None" runat="server">  
                    <telerikweb:RadSlidingZone ID="SlidingZoneLeft" Width="22" SlideDirection="Right" 
                        DockedPaneId="PaneToolbox" runat="server">  
                        <telerikweb:RadSlidingPane ID="PaneToolbox" Title="Toolbox" Width="250" runat="server">  
                        </telerikweb:RadSlidingPane> 
                    </telerikweb:RadSlidingZone> 
                </telerikweb:RadPane> 
                <telerikweb:RadPane ID="DesignerPane" runat="server" CssClass="ApplyPosition">  
                    <div style="width: 100%; overflow: hidden">  
                        <TelerikTabStrip:RadTabStrip ID="DesignerTabStrip" MultiPageID="DesignerTabContent" 
                           SelectedIndex="0" Align="left" runat="server">  
                            <Tabs> 
                                <TelerikTabStrip:Tab Text="Designer">  
                                </TelerikTabStrip:Tab> 
                                <TelerikTabStrip:Tab Text="HTML Preview">  
                                </TelerikTabStrip:Tab> 
                            </Tabs> 
                        </TelerikTabStrip:RadTabStrip> 
                    </div> 
                    <div id="DesignerTabContentContainer" style="width: 100%; height: 600px; overflow: hidden">  
                        <TelerikTabStrip:RadMultiPage ID="DesignerTabContent" SelectedIndex="0" runat="server">  
                            <TelerikTabStrip:PageView ID="PageDesigner" Width="100%" runat="server">  
                                <div style="width: 100%; height: 100%; border: solid 1px black">  
                                </div> 
                            </TelerikTabStrip:PageView> 
                            <TelerikTabStrip:PageView ID="PageHtmlPreview" Width="100%" runat="server">  
                                <div style="width: 100%; height: 100%; overflow: scroll; border: solid 1px black;">  
                                </div> 
                            </TelerikTabStrip:PageView> 
                        </TelerikTabStrip:RadMultiPage> 
                    </div> 
                </telerikweb:RadPane> 
                <telerikweb:RadPane ID="SlidingPaneRight" Width="22" Scrolling="None" runat="server">  
                    <telerikweb:RadSlidingZone ID="DesignerSlidingZone" Width="22" SlideDirection="left" 
                        DockedPaneId="PaneProperties" runat="server">  
                        <telerikweb:RadSlidingPane ID="PaneProperties" Title="Properties" Width="250" runat="server">  
                        </telerikweb:RadSlidingPane> 
                        <telerikweb:RadSlidingPane ID="PaneData" Title="Data" Width="250" runat="server">  
                        </telerikweb:RadSlidingPane> 
                        <telerikweb:RadSlidingPane ID="PaneStyles" Title="Styles" Width="250" runat="server">  
                        </telerikweb:RadSlidingPane> 
                    </telerikweb:RadSlidingZone> 
                </telerikweb:RadPane> 
            </telerikweb:RadSplitter> 
        </form> 
    </body> 
    </html> 

    Please note that in the following style definition, SlidingPaneLeft and SlidingPaneRight are the ClientIDs of the RadPanes, containing a RadSlidingZone:
     
    #RAD_SPLITTER_PANE_SlidingPaneLeft, #RAD_SPLITTER_PANE_SlidingPaneRight{position:relative;z-index:2;}  


    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dennis
    Dennis avatar
    62 posts
    Member since:
    Oct 2007

    Posted 15 Nov 2007 Link to this post

    I copied and pasted the code you provided into a new ASPX page, and it works perfectly for the right sliding pane (which I did not recognize as having the same problem until I resized it large enough to interact with the tabs). But the left sliding pane still slides under the tabs.

    So, it looks like I might be able to fix the issue with the z-index if I can find the appropriate place to apply. Let me know if you have any suggestions.

    Thanks.
    Dennis
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Nov 2007 Link to this post

    Hello Dennis,
    I am not sure why you had problems with the RadSlidingPanes on the left. In case you could send us a simple running project, demonstrating the problem, we will be able to investigate the cause for it.

    In the meantime, I have attached two projects to this thread - the first one demonstrating the approach I initially suggested (I tested the page and it works fine for the RadSlidingPanes on the left as well). The second project demonstrates how you can get the same result by means of javascript (in case you do not want to use the ClientIDs in order to apply the necessary style).

    Best wishes,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Dennis
    Dennis avatar
    62 posts
    Member since:
    Oct 2007

    Posted 16 Nov 2007 Link to this post

    I quickly tested the first solution, and it seemed to function as expected in IE7 (Firefox gave a couple of old, but not showstopper, border issues). I will compare the code to see what the differences are, but I don't want to put you guys through any more on this issue since I only need like 2 tabs, I think I am just going to do it manually.

    I appreciate the help on figuring this one out.

    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017