RadMenu inside RadSplitter

8 posts, 0 answers
  1. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 22 Nov 2010 Link to this post

    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>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 25 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 25 Nov 2010 Link to this post

    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>

     

  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 29 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 30 Nov 2010 Link to this post

    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?
  7. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 03 Dec 2010 Link to this post

    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--%>
  9. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017