Position
The Notification allows you to control the position of its popup and static messages.
You can apply available configuration options for positioning to:
Popup Messages
By default, the Notification creates popups, which overlay the other page content. If you do not define any position settings, the first popup is displayed near the bottom-right corner of the browser viewport and subsequent popups stack upwards.
You can independently control the positioning and stacking of notifications. If you do not define any stacking settings, the popups stack upwards or downwards, depending on the positioning settings. For example, popups displayed at the top of the viewport stack downwards and vice versa. The automatic settings of the stacking functionality comply with a common preference among users. However, you can render leftward or rightward stacking by explicitly defining the respective settings.
By default, popups are pinned, which means that they do not change their position when the user scrolls the page. To achieve the pinned functionality, apply a position:fixed style to the popups. To let the popups move together with the scrolled page, use the position:absolute style. If the popup content is expected to vary and stacking is likely to occur, you can define explicit dimensions. In this way, the popups are aligned and look better when stacked next to one another.
If the popup notifications appear too quickly or occupy too much space on the screen, the available space on the screen might become insufficient. In such cases, the subsequent popups appear outside the visible viewport area and are inaccessible, if pinned. To avoid such scenarios and provide better usability, use a shorter delay in hiding or static notifications.
Stacking works with the help of a Globally Unique Identifier (GUID), which is generated by the widget upon initialization and is appended as a CSS class to each notification element. In this way, every Notification instance recognizes and manages its own currently visible notifications independently.
It is not recommended to use two or more Notification instances which display notifications at the same place on the page because the notifications from the multiple instances will overlap each other.
The following example demonstrates how to position, stack, and resize notifications.
<div id="vueapp" class="vue-app">
<kendo-notification ref="popupNotification"
:position-top="30"
:position-right="30"
stacking="down"
:width="300"
:height="50">
</kendo-notification>
</div>Static Messages
The Notification also allows you to display static notifications which do not overlay other elements but, instead, take part in the regular flow of the page content. In such cases, the positioning settings are ignored as they are irrelevant.
When you use static notifications, you can only set the stacking direction to down (which is the default setting) or up, depending on whether new messages have to appear after or before the existing ones. Static notifications are displayed if a target container is specified. One component instance can display either popup or static notifications but not both of them at the same time.
The following example demonstrates how to enable static notifications.
