Duplicated icons with toastr - toastr

Question

I have several icons on top of each other in a toastr message. This is what it looks like:
My code is very simple, I use toastr after an Ajax call :
success : function(reponse) {
$(event.target).next('i').hide();
if (reponse.retour == 0){
toastr["success"](reponse.texte_retour);
} else {
toastr["error"](reponse.texte_retour);
}
}
I have the same problem whatever the type (error, info, warning, success). What is going wrong?

Answer 1

Another way to resolve this issue is to load the toastr css before you load the inspinia css. This way Inspinia overwrites the toastr css with its own custom css

Answer 2

The issue is solved.
I use 'inspinia framework'. in its style sheet there is already somme css declaration about toastr :
I commented these few lines and now it works fine. Don't know if it is a bug or not on the "inspinia" side.
Dominique

Answer 3

I had same issue, I checked my reference links to my css, I found that I was calling "toastrStyles" css after "inspania" css. I moved calling my "toastrStyles" css before calling "inspania" css, and it worked for me.

Answer 4

It looks like you are using font-awesome icons along with the default icons.
Adding this to your css should fix the overlapping icons by hiding the default image.
#toast-container > div.toast {
background-image: none !important;
}
Also if you want to vertical center your image add
#toast-container > .toast:before {
position: absolute;
margin: auto 1.5em auto -1.5em;
top: 50%;
transform: translateY(-50%);
}

Answer 5

Nothing to be done with any of the css customisations.Just keep your
toastr css immediately after boostrap(if using) and before any other css links.Its will work without any issues.
likes this:
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/toastr/toastr.min.css" rel="stylesheet">
....remaining links here after.....comes

Answer 6

I experienced the same issue with Inspinia. The reason was I loaded the toastr css file after the inspinia css file (style.css) causing the toastr css to overwrite the inspinia styles.

Answer 7

In my case changing css import order was not helpful at all. In that happens to you as well, you could override classes:
#toast-container > .toast-error:before {
content: none;
}
#toast-container > .toast-success:before {
content: none;
}
It is similar to #Dom answer, but without changing inspinia or toastr code itself.

Answer 8

loading toastr css before any other css, fix this problem for me.

Answer 9

use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT