Center toastr notifications within a div

asp.net css toastr
Bob Horn picture Bob Horn · Apr 6, 2013 · Viewed 18.2k times · Source

I'm trying to get my toastr notification to show up in the middle of a div. I've seen some suggestions, like this one, but it's centering based on the overall window, and not within a div.

Is it possible to center a toast notification within a form element, when toastr knows nothing about the elements on a form?

My latest attempt was to roughly center the toast within the page, but I'd like to center it within a certain div. Is that possible? If so, how?

This is my centering attempt:

.toast-center {
    top: 50%;
    left: 40%;
}

enter image description here

Answer

Eli picture Eli · Apr 6, 2013

You can try to create a new div and position it in the center of your expected div.

Then you can use positionClass option of toastr which is the location for your notification to popup 

toastr.options: {
    "positionClass": "your-newly-created-div-class"
}

Related questions

TypeError: $(...).DataTable is not a function

I am trying to work with jQuery's Datatable JS for my project from this link. I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to …

Read More
How do you modify a CSS style in the code behind file for divs in ASP.NET?

I'm trying to modify a CSS style attribute for a div based on the information I get from a database table in the code behind of my aspx page. The following is essentially what I am trying to do, but …

Read More
How do I put hint in a asp:textbox

How do I put a hint/placeholder inside a asp:TextBox? When I say a hint I mean some text which disappears when the user clicks on it. Is there a way to achieve the same using html / css?

Read More