Sub Menu Items Overlap over each other with Image Sprites

2 posts, 0 answers
  1. Harry
    Harry avatar
    2 posts
    Member since:
    Jun 2014

    Posted 28 May Link to this post

    Hi,

    I am using Radmenu with ImageSprites enabled to give selection options to users on the site. The problem is that the submenu items are overlapping on each other when used with vertical flow, while it works well with the horizontal flow being selected. I want the menu items (buttons/image sprites) to align vertically on top of each other.

    Code for Horizontal Menu Style

     

    01.<telerik:RadMenu ID="MenuQ3" runat="server" CssClass="RadMenu_Fixed2016" Flow="Vertical" CollapseDelay="10" EnableImageSprites="True">
    02.<Items>
    03.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSPrintMenu.png" BorderStyle="None">
    04.<Items>
    05.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=1">
    06.</telerik:RadMenuItem>
    07.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCompatativeStatement.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=2">
    08.</telerik:RadMenuItem>
    09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCFASanction.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=3">
    10.</telerik:RadMenuItem>
    11.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=4">
    12.</telerik:RadMenuItem>
    13.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ1=11">
    14.</telerik:RadMenuItem>
    15.</Items>
    16.</telerik:RadMenuItem>
    17.</Items>
    18.<DefaultGroupSettings ExpandDirection="Left" Flow="Horizontal" RepeatDirection="Horizontal" OffsetX="1" OffsetY="1" />
    19.</telerik:RadMenu>

     

     
        Code for Vertical Menu Style (desired, but buttons/menu items are overlapping each other)

    01.<telerik:RadMenu runat="server" CollapseDelay="1" EnableAutoScroll="True" EnableImageSprites="True">
    02.<Items>
    03.<telerik:RadMenuItem runat="server" ImageUrl="~/ImagesSys/swTSSPrintMenu.png">
    04.<GroupSettings ExpandDirection="Down" Flow="Vertical" RepeatDirection="Vertical" OffsetX="45" OffsetY="5" />
    05.<Items>
    06.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png">
    07.<GroupSettings OffsetX="45" OffsetY="5" />
    08.</telerik:RadMenuItem>
    09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCRV.png">
    10.<GroupSettings OffsetX="45" OffsetY="5" />
    11.</telerik:RadMenuItem>
    12.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png">
    13.</telerik:RadMenuItem>
    14.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="">
    15.</telerik:RadMenuItem>
    16.</Items>
    17.</telerik:RadMenuItem>
    18.</Items>
    19.</telerik:RadMenu>

    CSS

    01..RadMenu_Fixed2016
    02.      {
    03.          position: fixed !important;
    04.          height: 28px;
    05.          width: 139px; /* link goes at the bottom of the page */
    06.          top: 100%;
    07.          margin-top: -120px; /*140 = height + preferred bottom margin */ /* link is moved to the right */
    08.          right: 0%;
    09.          margin-right: 2px; /* = half of width */
    10.          cursor: hand !important;
    11.      }

    Please help me with the code to stop the buttons in the vertical menu from over lapping on each other.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    283 posts

    Posted 01 Jun Link to this post

    Hi Harry,

    Attached you will find a simple page based on your code and a screenshot of the page running. As you will notice, the items of the vertically expanded menu are not overlapping, even if they are quite small (low).

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top