How do I hide the CARET icon ?

I want to hide the menu's caret icon, and keep settings icon in center. 
I can't find a property control the caret icon.


3 Replies

SI Silambarasan I Syncfusion Team November 2, 2018 01:07 AM UTC

Hi Lorryl, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your query and currently, we don’t have any native property to hide the Caret icon in the menu. However, we would like to suggest you the below workaround solution to achieve your requirement. 
 
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret { 
  display: none; 
} 
 
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon { 
  padding-right: 5px; 
} 
 
 
Could you please check the above sample and get back to us with more information if we misunderstood your requirement or you need any further assistance on this? 
 
Regards, 
Silambarasan 



LO lorryl November 2, 2018 10:07 AM UTC

Thanks, that's working.

Another question: How to set the settings icon a title when hover on it ?


SI Silambarasan I Syncfusion Team November 2, 2018 11:51 AM UTC

Hi Lorryl, 
 
Thanks for your update. 
 
Your requirement “To set the title for settings icon” can be achievable by using ‘beforeItemRender’ client-side event in EJ2 Menu. Please refer the below code example. 
 
Stackblitz sample: 
 
default.html 
 
<ejs-menu [items]='menuItems' (beforeItemRender)="onBeforeItemRender($event)">></ejs-menu> 
 
 
default.component.ts 
 
public menuItems: MenuItemModel[] = [ 
   
        id: 'settingIcon', 
        iconCss: 'em-icons e-file', 
        items: [ 
            //… 
       
   
]; 
 
public onBeforeItemRender(args: MenuEventArgs) { 
  if (args.item.id == 'settingIcon') {         
    args.element.setAttribute('title', 'Settings'); 
  } 
 
 
Could you please check the above sample and get back to us if you need further assistance? 
 
Regards, 
Silambarasan 


Loader.
Up arrow icon