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

Hide Expand Arrow

1 Answer 343 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Eli
Top achievements
Rank 1
Veteran
Eli asked on 14 May 2020, 06:31 PM

Is there a way to hide the expand arrow on just the top level items?  They do have children.  A second option would be suggestion on how to expand a background to include the arrow, so it is not off to the side without effecting sub items.  Picture attached with icon off to side.  

I echo the need to apply custom styling up higher in the element like this thread references would be helpful as well.  https://www.telerik.com/forums/styling-issue 

 

 

Thank you.

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Svetoslav Dimitrov
Telerik team
answered on 15 May 2020, 12:22 PM

Hello Eli,

There are two possible approaches to handle this:

  1. Use a CSS selector that targets the <span> element that has the icon (k-menu-expand-arrow) and set the display attribute to none. Below, you can see a code snippet to illustrate the CSS rule.
  2. You could remove them by using a JavaScript function, because Blazor, as a framework, has some limitations regarding DOM manipulations. Basically what I did was to select the <span> items that contain the arrow down icon and used element.classList.remove() to remove the icon. As attached file you can see a demo project I built to showcase the things I explained above.

<style>
    .k-menu-expand-arrow {
        display: none;
    }
</style>

Regards,
Svetoslav Dimitrov
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
Eli
Top achievements
Rank 1
Veteran
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or