New to Kendo UI for jQuery? Start a free 30-day trial

Position

configuration

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.

position

Object

<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

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

Default: 20

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

position.left

Number

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

Default: null

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

position.pinned

Boolean

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

Default: true

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

position.right

Number

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

Default: 20

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

position.top

Number

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

Default: null

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