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

4 posts, 0 answers
  1. Kaan
    Kaan avatar
    46 posts
    Member since:
    May 2016

    Posted 29 May Link to this post

    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

  2. Kaan
    Kaan avatar
    46 posts
    Member since:
    May 2016

    Posted 29 May Link to this post

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

     

    Best regards,

    Kaan

  3. Kaan
    Kaan avatar
    46 posts
    Member since:
    May 2016

    Posted 29 May Link to this post

    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

  4. Dimitar
    Admin
    Dimitar avatar
    171 posts

    Posted 31 May Link to this post

    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 setup 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.
Back to Top