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

Remove indent/padding from context menu

1 Answer 188 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Brete
Top achievements
Rank 1
Brete asked on 22 Apr 2020, 08:57 PM

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.  

 

 

 

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 23 Apr 2020, 04:46 PM

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: 

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

 

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Menu
Asked by
Brete
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or