RadMenu inside RadSplitter

[David Borneman]

The following shows my RadMenu fine except when it drops down the submenu items go behind my content pane rather than over top. How can I fix this?

<radspl:RadSplitter ID="RSHeader" Orientation="Horizontal" Skin="Default" runat="server"
        FullScreenMode="True" Height="100%" SplitBarsSize="" Width="100%">
        <%-- Header Pane --%>
        <radspl:RadPane ID="RPHeader" Height="90" Width="100%" BackColor="white" Scrolling="None"
            Locked="true" runat="server">
            <table align="center" width="97%">
                <tr>
                    <td width="70px">
                        <img src="Images/keystone3.jpg" height="65px" width="68px" />
                    </td>
                    <td>
                        <br />
                        <img src="Images/DGA2.jpg" /><br />
                        <img src="Images/DGA.jpg" />
                    </td>
                    <td align="right">
                        <img src="Images/VAF.jpg" />
                    </td>
                </tr>
            </table>
        </radspl:RadPane>
        <%-- End Header --%>
        <radspl:RadSplitBar ID="RSBHeader" EnableResize="false" CollapseMode="None" runat="server" />
        <radspl:RadPane ID="RPMiddle" Height="100%" Width="100%" Scrolling="None" runat="server">
            <radspl:RadSplitter ID="RSContent" Orientation="Horizontal" runat="server" Skin="Default">
                <%--Navigation Pane--%>
                <radspl:RadPane ID="RPNavigator" Scrolling="None" Height="25px" CssClass="BackgroundColor"
                    runat="server">
                    <table align="center">
                        <tr>
                            <td>
                                <telerik:RadMenu ID="RadMenu1"  Skin="WebBlue" runat="server"
                                    OnClientItemClicked="OnClientItemClickedHandler">
                                    <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                    <Items>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Home" Value="Default.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="About" Value="About.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                            <Items>
                                                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Imaging" Value="Imaging.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Medical Equipment"
                                            Value="Medical.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                            <Items>
                                                <telerik:RadMenuItem runat="server" Text="Biodex" Value="biodex.aspx">
                                                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Displays/Monitors"
                                            Value="Displays.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="X-ray Tubes" Value="Tubes.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="CR/plates/casettes"
                                            Value="Plates.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Lamps/Batteries"
                                            Value="Lamps.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Test Equipment"
                                            Value="Equip.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Contact" Value="Contact.aspx">
                                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                                        </telerik:RadMenuItem>
                                    </Items>
                                    <ExpandAnimation Type="OutQuart" />
                                </telerik:RadMenu>
                            </td>
                        </tr>
                    </table>
                </radspl:RadPane>
                <radspl:RadPane ID="RPMain" CssClass="ContentPane" Scrolling="None" Height="100%"
                    runat="server">
                    <radspl:RadSplitter ID="RadSplitter1" Orientation="Vertical" runat="server" Skin="WebBlue">
                        <radspl:RadPane ID="RPContent" ContentUrl="Default.aspx" Scrolling="X" runat="server">
                        </radspl:RadPane>
                        <radspl:RadSplitBar ID="RadSplitBar1" CollapseMode="None" EnableResize="false" runat="server" />
                        <radspl:RadPane ID="RadPane2" Width="22" Scrolling="None" runat="server">
                            <radspl:RadSlidingZone ID="RadSlidingZone1" Width="22" ClickToOpen="true" SlideDirection="Left"
                                runat="server">
                                <radspl:RadSlidingPane ID="RadSlidingPane1" Title="Calendar" Width="150" runat="server">
                                    <radCln:RadCalendar ID="RadCalendar1" ShowRowHeaders="false" runat="server" Skin="WebBlue"
                                        Font-Names="Arial, Verdana, Tahoma">
                                        <SpecialDays>
                                            <radCln:RadCalendarDay Repeatable="Today" Date="">
                                                <ItemStyle CssClass="radCalToday_WebBlue"></ItemStyle>
                                            </radCln:RadCalendarDay>
                                        </SpecialDays>
                                    </radCln:RadCalendar>
                                </radspl:RadSlidingPane>
                            </radspl:RadSlidingZone>
                        </radspl:RadPane>
                    </radspl:RadSplitter>
                </radspl:RadPane>
                <%--End Main Content--%>
            </radspl:RadSplitter>
        </radspl:RadPane>
        <radspl:RadSplitBar ID="RSBFooter" CollapseMode="None" EnableResize="false" runat="server" />
        <%-- Footer --%>
        <radspl:RadPane ID="RPFooter" CssClass="BackgroundImage" Height="53" Width="100%"
            Locked="true" runat="server">
            <table align="center" class="Footer" width="80%">
                <tr>
                    <td align="left">
                        <img src="Images/ccr-logo200w.jpg" height="40px" />
                    </td>
                    <td align="left">
                        <img src="Images/190_Logo_WAWF_Registered.gif" height="40px" />
                    </td>
                    <td align="left">
                        <img height="40px" src="Images/GSA_logo.gif" />
                    </td>
                    <td align="left">
                        <img src="Images/257_Logo_ORCA.gif" height="40px" />
                    </td>
                    <td>
                        <img src="Images/copyright.jpg" />
                                            </td>
                </tr>
            </table>
        </radspl:RadPane>
        <%-- End Footer --%>
    </radspl:RadSplitter>

[Dobromir]

Hi David,

I tried to reproduce the problem with the provided sample code but to no avail. Could you please provide more detailed information regarding specific scenario?

• Which version of RadControls and .NET Framework are used in the application?
• Under which browser and its version the problem occurs?
• Could you please provide a simple fully runnable project and / or a live URL reproducing the problem so we can investigate it further?

Could you please try to set absolute position to the RadMenu explicitly and see if the problem still occurs?

Looking forward to hearing from you,
Dobromir
the Telerik team

[David Borneman]

Rad Controls version 2008.1.515.35
IE7
VS.net 3.5

Here is a smaller more simple example default.aspx - menu is inside a pane. When menu drops down it drops behind the content pane rather than in front of it:

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title>Untitled Page</title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<div>

 

 

 

</div>

 

 

<telerik:RadSplitter ID="RadSplitter1" Runat="server" FullScreenMode="true" Orientation="Horizontal" Items-Capacity="0"

 

 

SplitBarsSize="">

 

 

<telerik:RadPane Height="100px" ID="RadPane1" Runat="server">

 

Header

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar CollapseMode="None" runat="server" />

 

 

<telerik:RadPane Height="27px" runat="server" >

 

<

 

telerik:RadMenu ID="RadMenu1" runat="server">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem4">

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

</

 

telerik:RadMenu>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar ID="RadSplitBar1" CollapseMode="None" runat="server" />

 

 

<telerik:RadPane runat="server">

 

Content

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Dobromir]

Hi David,

Thank you for the provided sample page.

This is actually default behavior of the HTML - by default, nested element does not show outside of its parent element. To avoid this you need to set CSS property overflow to visible to the RadPane that contains the menu, e.g.:

<style type="text/css">
    .visibleOverflow
    {
        overflow: visible !important;
    }
</style>
<telerik:RadSplitter ID="RadSplitter1" runat="server" FullScreenMode="true" Orientation="Horizontal"
    Items-Capacity="0" SplitBarsSize="">
    <telerik:RadPane Height="100px" ID="RadPane1" runat="server">
        Header
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar1" CollapseMode="None" runat="server" />
    <telerik:RadPane ID="RadPane3" Height="27px" runat="server" CssClass="visibleOverflow">
        <telerik:RadMenu ID="RadMenu1" runat="server">
            <CollapseAnimation Duration="200" Type="OutQuint" />
       .....

All the best,
Dobromir
the Telerik team

[David Borneman]

Thanks - this works fine if I don't have my splitter set to FullScreenMode. But with splitter set to FullScreenMode I need to control the overflow as follows:
html, body, form, div
{   
     height: 100%;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
}

.visibleOverflow
{
    overflow: visible !important;  
}


If I add .visibleOverflow to my .css it doesn't work as long as I'm defining my overflow: hidden for the body. So it appears I can have the menu filxed or the splitter fixed but not both? Is there a work around this?

[Dobromir]

Hi David,

The FullScreenMode property is obsolete and we do not recommend to be used. If you need to configure RadSplitter to occupy the entire page you need to set splitter's Width and  Height properties to be 100% and make sure all the splitter parents have height set as well. More detailed information is available in the following help article:
Filling the Entire Page

Also, in the provided CSS you have set overflow hidden to all div with the global selector. In general, it is not recommended to use global CSS selectors when working with complex controls like RadControls, because it may cause problems with their rendering. Could you please try removing the div from the selector and see if the problem still occurs?

html, body, form, div
{
     height: 100%;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
}

All the best,
Dobromir
the Telerik team

[David Borneman]

Setting height & width for the splitter parent elements does not give the same overall effect as when using FullScreenMode. I was able to get by with what I had by making my menu pane of a height enough to show the dropdown one level - height=59px. then not using a splitbar and making sure my pages all display with white background then it's not apparent when the content is filled in below the menu pane.

<%--Navigation Pane--%>
        <telerik:RadPane ID="RPMain"  Scrolling="None" Height="59px" runat="server">           
            <div style="text-align: center; margin: 0 auto">
                <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />
                <telerik:RadMenu ID="RadMenu1" Skin="Web20" Flow="Horizontal" EnableEmbeddedSkins="false"
                    runat="server" DataSourceID="SiteMapDataSource1" DefaultGroupSettings-Width="140px"
                    OnItemDataBound="RadMenu1_ItemDataBound">
                    <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" Width="130px" />
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                    <ExpandAnimation Type="OutQuart" />
                </telerik:RadMenu>
            </div>
        </telerik:RadPane>
        <%--End Navigation Pane--%>
        <%--Content Pane--%>
        <telerik:RadPane ID="RPMainContent" Scrolling="Y" ContentUrl="Intro.aspx" Name="RPMainContent"
            runat="server" >
        </telerik:RadPane>
        <%--End Content Pane--%>

[Dobromir]

Hi David,

As I mentioned in my previous answer FullScreenMode property is obsolete and we recommend not to use it because it may cause unexpected side effects to the overall layout when upgrading to newer versions of RadControls.

In previous versions of RadControls when this property is set to true is sets the required height 100% to the html, body and form element and also is setting absolute positioning to the RadSplitter's wrapper <div> element.

Greetings,
Dobromir
the Telerik team