Remove Gray area with child menu items.

14 posts, 3 answers
  1. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 16 Sep 2015 Link to this post

    In the attached screen shot, you will notice there is a gray area to the left of each of the child menu items.

    How do I get rid of that gray area so it shows all white background for all the child menu items?

     

  2. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2015 Link to this post

    Hello Keith,

    The following CSS snippet will remove the vertical gray line, depending on the applied render mode:

    classic render mode:
    html .RadMenu .rmGroup {
        background-image: none;
    }

    lightweight render mode:
    html .RadMenu .rmVertical:before,
    html .RadMenu .rmMultiColumn:before {
        display: none;
    }

     

    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 17 Sep 2015 in reply to Magdalena Link to this post

    Thanks Magdalena!  That worked perfectly.  

    I was surprised that it worked because I had tried using CSS code to center the text of the Root menu item but never worked no matter what CSS code I put in based on postings regarding centering text of menu items.  At least the CSS code above worked for removing the vertical gray line.

    Regarding trying to center text of menu items, I found that using CSS code to center text only works when having EnableEmbeddedSkins = false property in the RadMenu.  Otherwise, it never works.  I use the Office2007 skin on all the telerik controls.  If you have a way to center text that works when using a Skin then please let me know.

    Anyways, thanks for your help!

    Sincerely,

    Keith Jackson

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Sep 2015 Link to this post

    Hello Keith,

    Text of subitems can be centered by the following:
    .rmGroup {
        text-align: center;
    }

    If you would like to center the text for an exact skin, you can add a CSS class with name of the skin
    .RadMenu_Office2007 .rmGroup {
        text-align: center;
    }


    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 18 Sep 2015 in reply to Magdalena Link to this post

    Thanks Magdalena but that did not work.

    Attached is a screen shot of the ASP.Net page with the RadMenu.

    There are no child items for Home and Logout.  I am just trying to get the text centered in the menu but nothing seems to work when using a Skin.

    Any help you can provide would be appreciated.  Thanks!

    Sincerely,

    Keith Jackson

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Sep 2015 Link to this post

    Hi Keith,

    I apologize for the misunderstanding. The provided code is for sub items of the RadMenu. If you would like to center text in root items, apply the following:
    .rmRootLink {
        text-align: center;
    }


    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 18 Sep 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

         I appreciate your help.  Unfortunately that did not work either.  It still shows it as Left aligned.

    I have even tried the following:

    .RadMenu_Office2007 .rmRootLink {

    text-align:center;

    }

    Still did not work.

    Sincerely,

    Keith Jackson

  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 22 Sep 2015 Link to this post

    Hello Keith,

    We are sending you a sample where we have applied the rule and worked properly at our side. Could you please test it if this solution works at your side? If yes, could you open a support ticket so you will be able to provide us with a sample project so we could test it locally?

    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 22 Sep 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

         I have tested your sample and it does work on my side.

         Using your sample, I started taking things out of it one by one to see when the text will stop being centered.  Particularly I was concentrating on taking things out that I was not using.  First I took out the Skin Manager and it still worked.  Second I took out the RenderMode property of the RadMenu and that is when it stopped centering the text.

         So what I did in my ASP.Net page is I put the .rmRootLink code back in between the Style tags and put in RenderMode="Lightweight" property in my RadMenu.  Then it worked in centering the text. But I do not like RenderMode of Lightweight.  I need it to be able to center the text without using Lightweight rendermode.

         If you can find a way to center text without using Lightweight rendermode then please let me know.  Thanks!

    Sincerely,

    Keith Jackson

  11. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 23 Sep 2015 Link to this post

    Hello Keith,

    Thank you for clarifying the case. Centering the text in the classic render mode can be achieved by the following:
    html .RadMenu .rmLink,
    html .RadMenu .rmHorizontal .rmText {
        float: none;
        padding: 0;
        text-align: center;
    }


    You can find a sample solution in the attachment.

    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 23 Sep 2015 in reply to Magdalena Link to this post

    Thanks Magdalena!  That worked perfectly.

    In this case, the RadMenu has only root items.  

    For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for both the root items and child items are centered?

    For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for only the child items are centered?

    For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for only the root items are centered?​​

    Sincerely,

    Keith Jackson

  13. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 29 Sep 2015 Link to this post

    Hello Keith,

    Please excuse us for the delayed reply.

    I attached back the sample page Magdalena posted in her last reply with some modifications to the CSS rules. The last two rules control the text centering of the root and child items.

    The three scenarios can be achieved through the following changes:
    1. Root items text centered and child items text left aligned:
    html .RadMenu .rmRootGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmText {
        float: none;
        padding: 0;
        text-align: center;
    }
     
    html .RadMenu .rmGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
        float: left;
        text-align: left;
    }

    2. Child items centered, root items left aligned. You need to remove the first rule:
    /*html .RadMenu .rmRootGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmText {
        float: none;
        padding: 0;
        text-align: center;
    }*/
     
    html .RadMenu .rmGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
        float: none;
        text-align: center;
    }

    3. Both root and child items text centered. In this case you only need the first rule:
    html .RadMenu .rmRootGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmText {
        float: none;
        padding: 0;
        text-align: center;
    }
     
    /*html .RadMenu .rmGroup .rmLink,
    html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
        float: none;
        text-align: center;
    }*/


    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 29 Sep 2015 in reply to Ivan Danchev Link to this post

    Thanks Ivan!  I really appreciate it.
  15. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 02 Oct 2015 Link to this post

    Hello Keith,

    You are welcome. I am glad the suggested styles helped you achieve the desired Menu appearance. Let us know if you need further assistance.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017