Display Notification with 100% Width

[Alvin]

Hi,

Is there a way to set the width of a notification to 100% of the available space?

The API documentation suggests I can achieve this using the cssClass property (https://www.telerik.com/kendo-angular-ui/components/notification/api/NotificationSettings/#toc-cssclass). I've tried adding width: 100% to the button-notification class in this fork of one of your examples: https://angular-btu63g.stackblitz.io but the notification width remains the same.

The width does change when I set an absolute value (e.g. width: 600px;).

But I can't predict what the available width will be and when the available space is less than the absolute value I set I get the following:

I want the notification to fill the entire available width (see below example from the Kendo website).

If I'm missing anything in the API documentation kindly point me in the right direction.

[Hetali]

Hello Alvin,

Thank you for the sample and the detailed information.

In order to have the length of the Kendo UI Notification to 100% of the available space, set the width to '100vw' which is 100% of the layout viewport's width. For example:

.button-notification {
  padding: 10px 5px;
  color: #313536;
  width: 100vw;
}

In this StackBlitz example, the width of the Notification component is set to 100%.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Alvin]

Hi Hetali,

Thanks for the quick response.

Regards,

A.