margin between stacked notifications

6 posts, 0 answers
  1. Morten
    Morten avatar
    296 posts
    Member since:
    Jul 2012

    Posted 09 Feb Link to this post

    I'm trying to add a little margin between stacked notifications to visually better separate individual notifications, however, I can't get the css right.

    All demo's of stacked notifications has zero margin.

    Do you have any suggestions?

  2. Patrick
    Admin
    Patrick avatar
    204 posts

    Posted 10 Feb Link to this post

    Hello Morten,

    One way to separate notifications would be this:
    div.k-animation-container{
      padding-bottom: 5px; 
    }

    You can see this approach in this Kendo UI Dojo by Progress.

    Hope this helps!

    Regards,
    Patrick
    Telerik by Progress
    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.
  3. Morten
    Morten avatar
    296 posts
    Member since:
    Jul 2012

    Posted 11 Feb in reply to Patrick Link to this post

    Hi Patrick,

    I would like to set the padding in my global stylesheet and only affect notifications.

    Do you know if the generally looking css class "k-animation-container" is used with any other widget in the kendo ui framework?

    /Morten

  4. Patrick
    Admin
    Patrick avatar
    204 posts

    Posted 13 Feb Link to this post

    Hello Morten,

    Please take a look at this documentation pertaining to the HTML Output of the notification.  .k-animation-container is used for the Kendo UI popups.  

    I hope this clears things.

    Regards,
    Patrick
    Telerik by Progress
    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.
  5. Morten
    Morten avatar
    296 posts
    Member since:
    Jul 2012

    Posted 25 Mar in reply to Patrick Link to this post

    Hello Patrick

    thanks for your answer.

    The documentations says "... k-animation-container, which is an element that wraps every Kendo UI popup...."

    Do you have an overview of what Kendo UI widgets are using "k-animation-container"?

    If I set some extra styling on "k-animation-container" I would like only the notifications to be affected.

    Thanks in advance.

    /Morten

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    483 posts

    Posted 29 Mar Link to this post

    Hi Morten,

    The k-animation-container class is used in most of the Kendo widgets. In is present in all drop-downs and also in all complex widgets, that contain drop-downs. Therefore, using that class for applying custom styles on the Notification may cause considerable styling issues.

    What I would recommend you to use instead is the custom class, that is appended to the <div> element of each Notification widget . You could get that class name from the instance of the widget:
    var customClass = centered._guid;

    The following Dojo demonstrates how to get the above class and inject a style rule, that would affect only that Notification widget element.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    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