position Object

This setting applies to popup notifications only, i.e. in cases when appendTo is not set. It determines the position of the first notification on the screen, as well as whether the notifications will move together with the page content during scrolling. top takes precedence over bottom and left takes precedence over right.

Default position settings

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        pinned: true,
        top: null,
        left: null,
        bottom: 20,
        right: 20
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>

position.bottom Number (default: 20)

Determines the pixel position of the first popup notification with regard to the viewport's bottom edge.

Example - set position.bottom

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        bottom: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>

position.left Number (default: null)

Determines the pixel position of the first popup notification with regard to the viewport's left edge.

Example - set position.left

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        left: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>

position.pinned Boolean (default: true)

Determines whether the popup notifications will move together with the other page content during scrolling.

Example - disable pinned notifications

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        pinned: false
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>

position.right Number (default: 20)

Determines the pixel position of the first popup notification with regard to the viewport's right edge.

Example - set position.right

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        right: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>

position.top Number (default: null)

Determines the position of the first popup notification with regard to the viewport's top edge. Numeric values are treated as pixels.

Example - set position.top

<span id="notification"></span>
<script>
$("#notification").kendoNotification({
    position: {
        top: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
</script>