Remove indent/padding from context menu

[Brete]

How do I remove the indent/padding from an expanded context menu?  

 

See attached image.  The only thing that should be visible is the black box with gold border.  

 

How do I remove the padding without effecting other menus elsewhere on the page?  

 

I created a custom skin called Black1 via the theme builder  but I do not see any entries to explain the indent.  

 

 

 

[Doncho]

Hi Brete,

You can use the CssClass property of the RadContextMenu to add additional CSS class to the menus which appearance you want to modify. Once you do that you can apply any custom Styles to the RadContextMenu.

In order to be able to override the built-in styles, you should consider using specific enough CSS selectors.

Here is a sample you can try:

ASPX declaration

<telerik:RadContextMenu ID="RadContextMenu1" CssClass="noPaddingMenu" runat="server" Skin="MySkin" EnableEmbeddedSkins="false" EnableRoundedCorners="true">

 

CSS

html body .RadMenu.noPaddingMenu .rmGroup,
html body .RadMenu.noPaddingMenu .rmPopup{
    padding:0;    
}                 
html body .RadMenu.noPaddingMenu .rmGroup:before,
html body .RadMenu.noPaddingMenu .rmMultiColumn:before,
html body .RadMenu.noPaddingMenu .rmScrollWrap>.rmHorizontal:before,
html body .RadMenu.noPaddingMenu .rmScrollWrap>.rmVertical:before{
    display:none; 
}                 
html body .RadMenu.noPaddingMenu .rmGroup .rmLink{
    padding:0
}

 

You can find helpful tips and tricks on how to inspect the HTML elements and the styles applied to them in the Improve Your Debugging Skills with Chrome DevTools blog post.

More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

I would be happy to help further but I will need to see details on the issue. It would be helpful if you could share a running sample so that I have a better overview of the case.

Kind regards,
Doncho
Progress Telerik