Hide icon column for menus with multiple columns

5 posts, 1 answers
  1. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 07 Dec 2018 Link to this post

    I have a RadMenu that I've set up for lightweight rendering. I have the following on the page to remove the icon column:

    div.RadMenu .rmGroup:before
    {
        width: 0px; /*remove the colored stripe from the left side*/
    }
     
    div.RadMenu .rmGroup .rmLink
    {
        padding-left: 0px; /*remove the text padding from the left side*/
    }
     
    div.RadMenu .rmGroup .rmSeparator
    {
        margin-left: 0px;/*stretch the separator*/
    }

     

    This works great except for the first menu item. Due to its length, I have that menu set as a two-column menu. Unfortunately, the background for the icon column continues to show up in the first column of this menu item (see the attached screenshot.) I found that I can turn off this background by unchecking .RadMenu .rmGroup.rmMultiGroup in the DOM explorer in my browser, but when I set that to:

     

    .RadMenu .rmGroup.rmMultiGroup {
        background: none;
    }

     

    the background continues to show up.

    What should I be doing to get rid of this column?

    Thank you!

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14103 posts

    Posted 12 Dec 2018 Link to this post

    Hello Bryan,

    Have you tried to increase the specificity of the class by setting the important rule:

    .RadMenu .rmGroup.rmMultiGroup {
        background: none !important;
    }


    Another way which works on my end is to hide the background using this class:

    .rmVertical:before {
       display: none !important;
    }


    Here is a screenshot of the class: https://www.screencast.com/t/ESGCZ7b4Ec.


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 12 Dec 2018 in reply to Rumen Link to this post

    I gave both of those changes a try, and they didn't work for me. While I was in there messing around, however, I tried the following:

     

    .RadMenu .rmMultiColumn:before {
        display: none!important;
    }

     

    That did the trick. Thanks for you help with this--I wouldn't have found this otherwise.

  4. Rumen
    Admin
    Rumen avatar
    14103 posts

    Posted 13 Dec 2018 Link to this post

    You are welcome!

    It would be pretty helpful if you provide the control configuration or the whole page content in the future so that we can directly experiment with the exact scenario and provide straight to the point solution :)

    Thank you!

    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 13 Dec 2018 in reply to Rumen Link to this post

    Argh... I should have thought of that. Especially now that you have the lightweight versions of the controls. I'll make sure I include my control configuration next time.

    Thanks again!

Back to Top