RadMenu Subgroup Size and Position

6 posts, 0 answers
  1. Jim
    Jim avatar
    8 posts
    Member since:
    Sep 2010

    Posted 15 Nov 2012 Link to this post

    Could someone help me with a CSS question for the RadMenu?

    I have RadMenu with several root items.  The menu is rendered horizontally.  When you hover over one of the root items so the sub menu items are displayed, the left edge of the slider panel that contains these items starts directly beneath the root item.

    I would like to change that so when you hover over a root item, the slider panel that drops down always is the same width, and the left edge of it is always in the same position, while the height auto-adjusts based on content.

    I am currently using a custom skin to style my menu.  Can someone tell me what classes I need to modify, and what properties I need in order to achieve this?  Below is a link to a drawing that illustrates the current behavior, and the behavior that I want.

    Example Illustration - Click to View

    Thank you for your time,
    Jim
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Nov 2012 Link to this post

    Hello Jim,

    The appearance that you are trying to accomplish can easily be achieved by getting the correct css class selectors and set the appropriate properties. Can you provide a live url that I can inspect locally and help you out?

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jim
    Jim avatar
    8 posts
    Member since:
    Sep 2010

    Posted 19 Nov 2012 Link to this post

    Hi Kate,

    I understand that all I need to do is set the correct properties and css class selectors.  The trick is getting the right ones, with the right values.  I do not have a live example of this, I am developing it locally.  However, I do have the menu in a user control, and the skin file that I have created (per Telerik documentation) that you can plug into your development site.  You can download the files here.

    Thank you for your assistance.
    Jim
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Nov 2012 Link to this post

    Hello Jim,

    Thank you for providing me the project that I could test locally. To position the dropdown of all of the items at one and the same place you can use the following css class selector:
    <style type="text/css">
           .rmTemplate {
               position: fixed !important;
               left: 0px;
           }
       </style>
     
    Further if you need to set a specific width to the items I would suggest that you do so by using the RadMenuItem:
    ... <Items>
                       <telerik:RadMenuItem Width="950px">
                           <ItemTemplate>
                               <div  .....

    Please give it a try and let me know if this helps.

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Jim
    Jim avatar
    8 posts
    Member since:
    Sep 2010

    Posted 26 Nov 2012 Link to this post

    Kate,

    Thank you for your reply.  I tried the code that you suggested and I wasn't able to achieve the desired result with my particular page setup.  The template that I am using for my pages uses a left and right margin setting of 'auto' in order to center the page content based on the user's browser window size.

    If I use the code that you suggested, it always places the submenu all the way to the left, not all the way to the left of the centered content as desired.  Please reference this page as an example and let me know what I need to do different to achieve the desired result.

    Thank you,
    Jim
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Nov 2012 Link to this post

    Hi Jim,

    Thank you for clarifying that. You can explicitly set the position of the dropdown by using GroupSettings in the following way:
    <telerik:RadMenuItem Text="Avant Garde<br>Annuals" PostBack="false">
                    <GroupSettings OffsetX="-20" />
    ....
         <telerik:RadMenuItem Text="Tres Chic<br>Tropicals" PostBack="false">
                       <GroupSettings OffsetX="-160" />
                    <Items>
    .....
     
         <telerik:RadMenuItem Text="Culinary<br>Couture" PostBack="false">
                     <GroupSettings OffsetX="-280" />
                    <Items>
    ......


    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017