Menu coming on top of rad sliding zone

3 posts, 0 answers
  1. ajit
    ajit avatar
    46 posts
    Member since:
    Jun 2009

    Posted 09 Oct 2009 Link to this post

    Hi,
             I have a sliding content pane on the right side of the aspx page. Now what is happening is as sliding pane opens it is going partly below the menu making it look ugly. I believe it is a z-index problem but i m not able to resolve it. I want the sliding pane to come on top of the menu . Please could you provide some pointers on this issue.

    Thank you,

    Regards,
    Ajit
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 14 Oct 2009 Link to this post

    Hello ajit,

    I was able to replicate the problem with the code below, but lowering the z-index of RadMenu did the trick.

    <telerik:RadMenu ID="RadMenu1" style="z-index:1" .../>

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="700" Height="500">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150px">
                        Pane 1 Content
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150px">
                        Pane 2 Content
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150px">
                        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:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                    <telerik:RadPane ID="Radpane1" runat="server" Height="22px" Scrolling="none">
                        <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22px" SlideDirection="Bottom">
                            <telerik:RadSlidingPane ID="Radslidingpane4" Title="Pane1" runat="server" Height="150px">
                                Pane1</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="Radslidingpane8" Title="Pane2" runat="server" Height="150px">
                                Pane2</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="Radslidingpane9" Title="Pane3" runat="server" Height="150px">
                                Pane3</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane ID="Radpane2" runat="server">
                       <telerik:RadMenu ID="RadMenu1" style="z-index:1" runat="server">
                       <Items>
                       <telerik:RadMenuItem Text="test">
                       </telerik:RadMenuItem>
                       </Items>
                       </telerik:RadMenu>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
                <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" ClickToOpen="true"
                    SlideDirection="Left">
                    <telerik:RadSlidingPane ID="Radslidingpane5" Title="Pane1" runat="server" Width="150px">
                        Pane 1 Content
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane6" Title="Pane2" runat="server" Width="150px">
                        Pane 2 Content
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane7" Title="Pane3" runat="server" Width="150px">
                        Pane 3 Content
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>

    Let us know how it goes or if your case is different.


    Best wishes,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. ajit
    ajit avatar
    46 posts
    Member since:
    Jun 2009

    Posted 14 Oct 2009 Link to this post

    Thanks Peter...it got me going.

    Regards,
    Ajit
Back to Top