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

Missing font icons

6 Answers 355 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Software
Top achievements
Rank 1
Veteran
Software asked on 09 Dec 2020, 02:30 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 11 Dec 2020, 11:07 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Software
Top achievements
Rank 1
Veteran
answered on 18 Dec 2020, 07:07 AM

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

0
Dimitar
Telerik team
answered on 21 Dec 2020, 12:20 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Software
Top achievements
Rank 1
Veteran
answered on 04 Feb 2021, 12:16 PM

Hi,

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

BR

0
Software
Top achievements
Rank 1
Veteran
answered on 04 Feb 2021, 12:48 PM
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.
0
Dimitar
Telerik team
answered on 05 Feb 2021, 11:17 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Software
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Software
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Share this question
or