Missing font icons

[Software]

Hi folks,

I encountered the following issue: I created a new notification object and it is shown correctly. However, the close icon is missing. The strange thing is the error icon is displayed correctly. I also had a look at the resulting HTML code and this looks fine.

I also checked the WebComponents and KendoUIGylphs font files. I provide these. If I remove them the error icon disappears.

I also had a look inside these files and the keywords "close" and "error" are available.

Do you have any idea what the reason might be?

We use KendoUI 2020.2.617.

BR

 

[Neli]

Hi,

Could you please give us a little bit more details? Which Kendo Theme you are using? Could you please provide the configuration at your end? I have tested locally, but the close icon is displayed correctly on my end. Here you will find a Dojo example with version 2020.2.617 where the close icon appears correctly. Could you please try to modify the sample in order to replicate the same appearance as it is at your end and send it back to us for a review?

Looking forward to your reply.

Regards,
Neli
Progress Telerik

[Software]

Hi Neli,

we use the bootstrap theme:

bootstrap.css
kendo.common-bootstrap.css
kendo.bootstrap.css

And indeed, if I use this theme the close icon disappears:

https://dojo.telerik.com/uWaqucIH

[Dimitar]

Hi,

The Notification close button button visibility is controlled by the boolean button property, which is false by default.

With LESS based themes such as Bootstrap v3, which is used on your side, the button appearance is correct. Unless button is set to true, although rendered, the close button is hidden with CSS.
With SASS based themes, such as Default v2 from Neli's Dojo snippet or Bootstrap v4, the button is always visible. I will further check whether this is an issue for fixing.

Still, with Bootstrap v3, set button true to have the close button visible on your side.

Regards,
Dimitar
Progress Telerik

[Software]

Hi,

sorry for the late answer. That works out great. Thanks for the hint!

BR

[Software]

However, one more thing: if I set the button property to true the close button does appear but the cursor icon does not change when hovering over the close button.

[Dimitar]

Hi,

The cursor may be changed to pointer with the following CSS rule - Dojo snippet:

      .k-notification-closable .k-notification-wrap>.k-i-close {
        cursor: pointer;
      }

And as far as the SASS based themes are concerned, we have fixed the button visibility issue and it will be included in R1 2021 SP1 release.

Regards,
Dimitar
Progress Telerik