Using Top Center Position won't allow user to click elements at the same height as the Notification

[cgreenwood80]

Hi

First off I have to say that I love the notification framework. It was very easy to follow the documentation and get this working with our application. I have run into one small issue though.

On our pages we decided to use the notifications on the Top Center position and bring it just below our menu bar. Looks great, disappears in the correct time. However, any element that is at the same level as a displayed notification cannot be clicked on (button) or entered into (textbox) while the notification is displayed. This can be reproduced on the demo site (http://foxandxss.github.io/angular-toastr/) by selecting the Top Center position, clicking the 'Open Toast' button about 5 times and then trying to click into the 'Toast Title' textbox.

I have attempted to tweak the CSS to make it so that the containing div (toast-container) does not cover the entire page (which seems to be the issue) but then the spacing gets mangled. This is not an issue if I use other positions like Top Right, or Top Left but I do encounter the same issue if I use Bottom Center.

Any ideas on a CSS tweak that may resolve this issue for me?

[Foxandxss]

Uhm, I read you, but I am not a CSS expert at all (the CSS of this library is one of the things that came straight from the original library).

I am not sure I can help you with that. Perhaps changing the zIndex?

[njkremer]

Seems that on #toast-container if you set pointer-events: none; then set div that is two elements down (it has the class toast on it) to pointer-events: auto; will work.

You can even just fix this yourself though it requires use of !important; to override the inline style of pointer-events: none;

@cgreenwood80 if you just want to fix your stuff you can override the styles with the following:

#toast-container {
    pointer-events: none !important;
    .toast {
        pointer-events: auto;
    }
}

[woohling]

I changed toastr css file. Easy way to achieve it.

.toast-top-center {
   left: 50%;
   margin-left: -150px;
   width: 300px;
}

it's to make the toast not to cover the whole width of the window. Thus it would not prevent the click event beneath.

[gilluminate]

@njkremer's fix works, but this should be the default. I see that the pointer-events were added to the container for Ionic support several years ago, but that should have been added to the .toast not .toast-container. I'm going to submit a pull request as this is causing problems for our app as well.