margin between stacked notifications

[Morten]

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?

[Patrick | Technical Support Engineer, Senior]

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

[Morten]

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

[Patrick | Technical Support Engineer, Senior]

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

[Morten]

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

[Veselin Tsvetanov]

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

[Morten]

for reference I ended up with the following:

        show: function() {
            var $notifications = $(".my-notification").closest(".k-animation-container");
            $.each($notifications, function() {
                $(this).css({ "margin-top": "2px" });
            });
        }