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

Styling issue

3 Answers 158 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 16 Apr 2020, 07:38 AM

The html in bold is generated by the Menu control for a menu item, the non-bold code is from my menu item template.

The k-link / k-menu-link styles provides the mouse over and cursor effect.


<li class="k-item k-menu-item telerik-blazor"
data-id="e5bda03c-693b-4a70-9310-75977f58d39a" role="menuitem"
aria-live="polite" tabindex="0" aria-label="Paste">
    <span class="k-in k-link  k-menu-link   ">
        <span class="lt-menu-item lt-disabled">
            <img src="EditPaste.svg"><span>Paste</span>
        </span>
    </span>
</li>

I'm trying to create a disabled menu item, but I realy need to style the k-menu-link span otherwise the effect is not on the full menu item (see image).

Any thoughts on how to do this, or would it be possible to provide a property that allows a style to be injected into the  <span class="k-in k-link  k-menu-link   ">

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 16 Apr 2020, 08:44 AM

Hello Simon, 

Would a parameter on the menu like CssClassField solve this? It would be provided from the menu item model like the other fields (say, text), but the menu would render it on the menu item itself (li.k-item), not inside the template?

 

Regards,
Marin Bratanov
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.
0
Simon
Top achievements
Rank 1
answered on 16 Apr 2020, 09:03 AM
That sounds like it would would work and allow state specific styling of the whole menu item.
0
Marin Bratanov
Telerik team
answered on 16 Apr 2020, 09:37 AM

Hi Simon,

You can Follow the implementation of such a feature in this page I just made: https://feedback.telerik.com/blazor/1462081-cssclassfield-for-the-menu-to-style-the-entire-item

 

Regards,
Marin Bratanov
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
Simon
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Simon
Top achievements
Rank 1
Share this question
or