New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not working with Bootstrap 4.2? #602
Comments
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 |
It would be nice in the future, if the package would warn if an untested bootstrap is used. |
There is an issue with naming collision for the .toastr CSS class in bootstrap and ngx-toastr. |
That solution works in some cases, but when using |
ah yes. Bootstrap recently introduced the Toast component. Personally, I use scss and copy the |
Can confirm this issue, all toasts disappeared after updating bootstrap to |
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: |
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. |
I agree with @MikeOne, I find the recommended fix more a temporary solution / workaround then a real solution to the problem. |
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 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 |
🎉 This issue has been resolved in version 10.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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?
The text was updated successfully, but these errors were encountered: