Ngx-toastr: Not working with Bootstrap 4.2?

[fijas]

Seems like this component is not working when using the newly released Bootstrap 4.2. A quick investigation shows that BS4.2 is using the .toast class which is hiding ngx-toastr toasts. Any possibility of namespacing the toast classes of ngx-toastr? Perhaps with toastr-* or something similar?

[scttcper]

yeah theres some conflicts. i recommend not importing bootstraps toast css for now. You can import only parts of bootstrap as seen in this project's demo https://github.com/scttcper/ngx-toastr/blob/master/src/styles.scss#L1-L37

For a list of all imports see bootstrap itself - https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap.scss

[bpatrik]

It would be nice in the future, if the package would warn if an untested bootstrap is used.
Like: a warning during npm install. But the very best would be if a console.warning() would show an 'untested version' warning if the angular app is not in production mode. (enableProdMode() was not called)

[nikhilpatel7]

There is an issue with naming collision for the .toastr CSS class in bootstrap and ngx-toastr.
You can find the solution below till they fix it.
https://stackoverflow.com/questions/53989445/ngx-toastr-toast-not-showing-in-angular-7

[dstj]

There is an issue with naming collision for the .toastr CSS class in bootstrap and ngx-toastr.
You can find the solution below till they fix it.
https://stackoverflow.com/questions/53989445/ngx-toastr-toast-not-showing-in-angular-7

That solution works in some cases, but when using positionClass: 'toast-top-full-width' for example, it doesn't do a good job.

[cmckni3]

ah yes. Bootstrap recently introduced the Toast component.

Personally, I use scss and copy the bootstrap.scss contents to my project and import only what I need. As @scttcper mentioned, not importing the bootstrap toast styles is a good workaround for now.

[mitschmidt]

Can confirm this issue, all toasts disappeared after updating bootstrap to 4.2 - thanks for the hint with the style sheets, that works for me as well.

[tbadlov]

This is due to conflicts with bootstrap 4.2.1 toast component. For now you can override by adding another style element to your project:

#toast-container > div {
  opacity:1;
}

more details here:
https://stackoverflow.com/questions/17635655/setting-toastr-opacity#answer-17640150

[michielkikkert]

Even though the recommended fix is workable - I would like to suggest to rename all ngx-toastr styles to reflect the namespace to prevent clashes like this.

[bpatrik]

I agree with @MikeOne, I find the recommended fix more a temporary solution / workaround then a real solution to the problem.

[Sef1995]

When i set the opacity to 1 I can see my toast but the background color of it is white instead of red.

[yarrgh]

When i set the opacity to 1 I can see my toast but the background color of it is white instead of red.

@Sef1995 Are you by chance importing bootstrap into your styles.scss file and then importing toastr.css?

Doing that caused me to see the same issue as you, even though I imported toastr.css after all bootstrap imports. Inspecting the generated css puts bootstrap's .toastr class after all of the classes in toastr.css and overwrites the background color.

To solve this I had to remove the import for toastr.css out of styles.scss and move it into the angular.json file, in the styles array after styles.scss.

"styles": ["src/styles.scss", "node_modules/ngx-toastr/toastr.css"],

I don't know what caused this to suddenly happen. Not sure if it was a recent change to @angular/cli or if something else changed.

[scttcper]

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: