CODEWITHSUNDEEP
asp.net-mvckendo-uitelerikkendo-asp.net-mvc
Thought
Thought

Reputation: 5856

Center a kendo notification on screen

I have these notifications on a asp.net mvc website, and i would like to know if there is a way of centering the notification in middle of screen instead of using absolute values ( 30 and 3 in this case )

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(p => p.Pinned(true).Top(30).Left(3))
    .Stacking(NotificationStackingSettings.Down)
    .AutoHideAfter(0)
    .Templates(t =>
    {
        t.Add().Type("error").ClientTemplateID("errorTemplate");
        t.Add().Type("upload-success").ClientTemplateID("successTemplate");
    })
)

Upvotes: 1

Views: 3432

Answers (1)

Jonathan Buchanan
Jonathan Buchanan

Reputation: 878

They have an example on Kendo-UI of how to do this, but from what I can see they just set it with JavaScript event when you add a new notification.

Add an on Show event for to your Notification declaration.

.Events(e => e.Show("onShow"))

Then add the following JavaScript function.

function onShow(e) {
  if (!$("." + e.sender._guid)[1]) {
    var element = e.element.parent(),
      eWidth = element.width(),
      eHeight = element.height(),
      wWidth = $(window).width(),
      wHeight = $(window).height(),
      newTop, newLeft;

    newLeft = Math.floor(wWidth / 2 - eWidth / 2);
    newTop = Math.floor(wHeight / 2 - eHeight / 2);

    e.element.parent().css({ top: newTop, left: newLeft });
  }
}

What this does is gets the height and width of your notification and the inner window of the browser. Half the height of the browser would put the top of the notification halfway down the page so they take half the height of notification from that value and will make it centered.

You can check the complete example here

Upvotes: 2

Related Questions