Angular 2 - Toastr Custom Location

Question

I'm using toastr-ng2 and I want the location of the toast to be under the header of my webpage (e.g. style="margin-top: 30px").
I can't seem to find the settings for this option. Is this possible?

Answer 1

I found an easy way to do this. By inspecting the page element when the toastr is displayed, you can get the css that's used. Then modify the code and add it to the styles.css file which can overwrite the default toastr settings.

E.g.

#toast-container.toast-top-center .toast,
#toast-container.toast-bottom-center .toast {
    margin-top: 50px;
}