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> |
4 Answers, 1 is accepted
0
Hi Dennis,
You can use the following approach in order to get the desired behavior:
Please note that in the following style definition, SlidingPaneLeft and SlidingPaneRight are the ClientIDs of the RadPanes, containing a RadSlidingZone:
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
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
0
Dennis
Top achievements
Rank 1
Rank 1
answered on 15 Nov 2007, 06:53 PM
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
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
0
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
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
0
Dennis
Top achievements
Rank 1
Rank 1
answered on 16 Nov 2007, 02:50 PM
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.
I appreciate the help on figuring this one out.
Thanks.