Customise CSS on Wijmo Components (wj-menu)

Customise CSS on Wijmo Components (wj-menu)

Posted by: dmunjal on 30 June 2021, 4:24 am EST

• 

  dmunjal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 June 2021, 4:24 am EST

  I am using wj-menu component and want to customise some parts of the dropdown. However, I am not able to do so. Is there any way I can achieve it?

  We can consider the example which is provided in the demo here.
  
  https://www.grapecity.com/wijmo/demos/Input/Menu/Overview/angular

  Here, I just want to change the background color and text color of the dropdown menu (when in expanded state) or maybe the background color of the elements when hovered. What are the ways I can achieve these specific changes?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2021, 2:17 am EST

  Hi,
  
  In order to achieve the required functionality, You may set css class of menu’s dropdown using dropDownCssClass property as follows -

  <wj-menu #fileMenu [header]="'File'" [dropDownCssClass]="'menu-dropdown'" (itemClicked)="menuItemClicked(fileMenu)">
  

  And then set css style as follows -

  .menu-dropdown {
    background-color: cyan !important;
  }
  .menu-dropdown > .wj-listbox-item:hover {
    background-color: red !important;
  }
  

  For better understanding, you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-e45xuq?file=src%2Fstyles.css

  ~sharad