This is a migrated thread and some comments may be shown as answers.

Hide icon column for menus with multiple columns

4 Answers 71 Views
Menu
This is a migrated thread and some comments may be shown as answers.
bdrennen
Top achievements
Rank 1
bdrennen asked on 07 Dec 2018, 06:59 PM

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!

4 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 12 Dec 2018, 11:41 AM
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.
0
bdrennen
Top achievements
Rank 1
answered on 12 Dec 2018, 09:11 PM

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.

0
Rumen
Telerik team
answered on 13 Dec 2018, 08:35 AM
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.
0
bdrennen
Top achievements
Rank 1
answered on 13 Dec 2018, 03:59 PM

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!

Tags
Menu
Asked by
bdrennen
Top achievements
Rank 1
Answers by
Rumen
Telerik team
bdrennen
Top achievements
Rank 1
Share this question
or