Duplicated icons with 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%);
}