Bug with Down Icon Css

[Scott]

I just updated our web application to the new 2020.2.513 core release. However, the css for menu items with children has changed. This causes the down icon to not show correctly. It shows as a box now which is what happens when it can't show the icon. (See attached.)

 

Old css that worked:

<span class="k-icon k-i-arrow-60-down k-menu-expand-arrow"></span>

New css that does not work:

<span class="k-menu-expand-arrow k-icon k-i-arrow-60-down"></span>

If I use the devtools of Chrome and edit the generated css to match the old css, it works again.

So, to me, it's a bug.

However, what I need asap is a way to overcome the bug for now so that the old css is used again.

[Scott]

Observations:

1. It seems that the adding and removing of css classes on this span tag during document load is useless as something makes sure that class is always "k-menu-expand-arrow k-icon k-i-arrow-60-down".
2. There are no events that can be used. DataBound() never fires when I use hard coded Items. Activate() only fires when I touch with the mouse. I need the initial display to show the down arrow or else the user won't know to touch.

This is a showstopper. I will be forced to roll back from this version if a workaround isn't available.

 

[Dimitar]

Hello Scott,

I have tried replicating the described issue with examples from the official demos to no avail:

• https://demos.telerik.com/aspnet-core/menu/index

Could you provide any additional information that would help in diagnosing the issue ?  A simple runnable solution with just the Telerik Menu that replicates the issue would be of great help, as I will be able to examine the exact configuration used and troubleshoot the issue further.

In addition to the above, could you also specify which theme is being used in the project? In case a less-based theme is being used, please make sure that all of the theme-related client-side resources are also updated (scripts and styles, fonts).

I am looking forward to hearing from you.

Regards,
Dimitar
Progress Telerik

[Scott]

I am using the Bootstrap 3 theme and I swapped out the k-i-arrow-60-down icon for a font awesome one using css.

 

However, I fixed the problem by simply editing the source JavaScript file as I indicated above. It worked as expected thus confirming that the latest release changed the order of the classes. I now have a usable product again but it would be nice to fix that.

[Dimitar]

Hello Scott,

Thank you for the additional clarifications provided.

The order of the classes in general should not affect how icons are being displayed. Could you show the code responsible for changing the default Menu arrow with the font awesome one so that I could examine it further?

Regards,
Dimitar
Progress Telerik

[Scott]

Here is the custom css that overrides the default down icon. I should note that we have used this css for a few years with no problems until the new 2020.2.513 release.

.k-i-arrow-60-down:before {
    content: "\f0d7";
}

All I can tell you is when I compared the working html to the non-working html, I saw the class order on the element had changed. When I used the Chrome dev tools to reorder the classes, the icon showed up. So when I altered the source .js file to place the classes in the order they used to be, the icon displays once again.

Not optimal, but it's much better than rolling back to the previous release.

[Dimitar]

Hello Scott,

I have tried overriding the default icon of the Menu by:

1) Including FontAwesome on the page:

 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

2) Overriding the icon through CSS:

  <style>
    .k-i-arrow-60-down:before {
      content: "\f0f3";   
      font-family: FontAwesome;
    }
  </style>

Without specifying the specific font-family I was able to replicate the described behavior where the icon is not visible. As the Kendo UI Font icons set a different font to the k-icon elements, it is required to also override it when changing the icons. Could you try this and let me know how that works (without modifying the kendo js files)?

Regards,
Dimitar
Progress Telerik

[Scott]

Dimitar, you were basically spot on. I put the js file back to the released version and confirmed the missing icon issue was back.Then, I applied the custom css that you posted. It failed but I did some research and tweaked it a bit. And it worked.

I added this to the css:

    font-family: "Font Awesome 5 Free";
    font-weight: 900;

So the issue is now not an issue.

Thank you very much for your persistence.

[Dimitar]

Hello Scott,

I am glad to hear that you have managed to successfully resolve the issue!  Indeed, FontAwesome version 5 have changed the font name, thus ensuring the correct font-family is set resolves the issue with the new version.

Wish you a great day.

Regards,
Dimitar
Progress Telerik