What is the best way to override CSS for context menu in diagram control?

[MM]

Hello,

I need a context menu with overflow-y, also after every item, the bottom border should be present.

What is the best way to do this in Angular 7?

Something like this.

Thank you,

[Aravind Ravi]

Hi Maja,  

  

We have created a sample to demonstrate how to customize the context-menu using css and we have attached the sample in the below sample link.  

  

Sample link: https://stackblitz.com/edit/angular-ytrgps?file=app.component.ts  

  

In the below code snippet we added the border and the width to the context menu and by using this you can customize whatever properties at your end.  

  

  

 <style>  

      .newclass{  

        width:400px;       

      }  

      li{  

         list-style-position:inside;  

        border-bottom: 0.5px solid black;  

        width:400px  

      }  

 </style>  

// add the newly created class to the context menu   

document.getElementById(diagram.id+‘_contextMenu').classList.add('newclass')  

  

  

Regards,  

Gowtham G  

 

[MM]

Hi,

Thank you Gowtham, but this is not a good approach, this way you customize every list (li element)...

We want to preserve original implementation and only overwrite some pages with a custom context menu.

Is this possible?

[Aravind Ravi]

Hi Maja,  

  

We have attached the sample to demonstrate how to customize context-menu by using existing classes. Please find the sample at the below link.  

  

Sample Link: https://stackblitz.com/edit/angular-ytrgps-1say6g?file=app.component.ts 

  

You can use the following class to customize the context menu as per your requirement:  

  

  

// to customize the context menu on render use the following class  

.e-contextmenu-wrapper ul  

{  

  background-color:gray;  

  width:200px  

}  

  

// to customize the context menu on select a particular list use the following class  

.e-contextmenu-wrapper ul .e-menu-item.e-selected  

{  

   background-color:green;  

}  

  

// to customize the context menu on focus a list use the following class  

.e-contextmenu-wrapper ul .e-menu-item.e-focused  

{  

   background-color:red;  

}  

  

 

  

  

  

Regards,  

Aravind Ravi 

[MM]

Thank you

Have a nice day.

Best regards,

M

[Aravind Ravi]

Hi Maja,

Most welcome. Please let us know if you need any other assistance

  

Regards 

Aravind R