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

Bug: popup notifications overlap (with max-width and font-size in pt)

3 Answers 180 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Kaan
Top achievements
Rank 1
Kaan asked on 29 May 2017, 03:16 PM

Hi!

It seems like the popup notifications overlap and the last word of short notification texts slips to the next line, when I limit their max-width and set the font-size in pt units.

Here is a demonstration of the bug (don't forget to make the browser window narrow first, so that longer notification texts need get wrapped automatically): http://dojo.telerik.com/iwiXE/13

When you change the font-size units to px, then the popup notifications work as expected. So it seems like the notification widget has a problem with font-size set in pt units. Or maybe I have to set the max-width in a different way?

 

What font-size and div size units are recommended generally when I want to create responsible web apps with Kendo UI? I am using vw and vh units for divs.

 

Best regards,

Kaan

3 Answers, 1 is accepted

Sort by
0
Kaan
Top achievements
Rank 1
answered on 29 May 2017, 04:09 PM

Changing pt to px does only solve the issue for Chrome and Firefox, but not for IE Edge.

 

Best regards,

Kaan

0
Kaan
Top achievements
Rank 1
answered on 29 May 2017, 04:37 PM

Same issue for Chrome Android (pt -> px does not solve the problem).

What would be a possible solution to set a max-width for popup notifications?

 

Best regards,

Kaan

0
Dimitar
Telerik team
answered on 31 May 2017, 12:42 PM

Hello Kaan,

Thank you for the provided feedback.

Generally, setting the font-family and font-size should not cause any abnormalities with the Kendo widgets.

I have debugged the example that you have sent and I can confirm that there is a bug in the Kendo Notifications implementation, which is causing the notifications to overlap in Chrome for Android. I have logged the issue on the official bug tracker and you can start tracking the progress we make on it from here.

Speaking about units, points (pt) are typically used for print media and therefore are not suitable to use in the specific scenario. You should preferably work with em, percent and pixel units, which provide a more consistent and accessible display for users.

I have a Dojo example for you, which fixes the overlapping on desktop browsers and you can use it until the issue with mobile Chrome is resolved. 

Additionally, as a small token of gratitude for reporting this bug, I have updated your Telerik points accordingly. You can find more information in your Telerik profile.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Notification
Asked by
Kaan
Top achievements
Rank 1
Answers by
Kaan
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or