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?

The problem is that there are multiple icons overlapping each other? — Pekka, Jan 24 '16 at 10:26
the problem is solved. I use "inspinia template" and the css was already declared in this template. So it was not necessary to duplicate the css style in the html file. Now it works fine. Sorry and thank you for your question. Merci. Dominique — Dom, Jan 24 '16 at 10:42
No problem! This could be something that happens to someone else in the future, so the question may be worth keeping around. You could post an answer yourself once you can. I'll edit the title to make the problem a bit clearer. — Pekka, Jan 24 '16 at 10:50
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks! — Alisson Reinaldo Silva, Jul 16 '16 at 19:51

score 20 · Answer 1 · answered Mar 21 '16 at 14:35

20

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

answered Mar 21 '16 at 14:35

Hibbem

1,491
15
22

2

This solution worked for me and allowed to keep other config options. – Juan Pablo Ugas Sep 26 '16 at 18:26

score 13 · Answer 2 · answered Jan 24 '16 at 11:05

13

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

answered Jan 24 '16 at 11:05

Dom

2,984
3
34
64

1

This solution will be lost after Inspinia update. @Reyske solution work for me and will not overwrite default Inspinia style. – Strabek Nov 19 '16 at 16:49

Ilham Ibrahimkhalilov · Answer 3 · 2017-12-15T12:28:41.167

4

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.

edited Dec 15 '17 at 12:28

answered Dec 14 '17 at 07:55

Ilham Ibrahimkhalilov

41
3

1

You are welcome. And you can delete the no longer required comments, too ;-) – GhostCat Dec 15 '17 at 12:54

score 3 · Answer 4 · answered Feb 26 '16 at 13:10

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

Praveen Kumar Rejeti · Answer 5 · 2017-04-19T06:32:44.017

2

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

edited Apr 19 '17 at 06:32

answered Apr 19 '17 at 06:27

Praveen Kumar Rejeti

213
2
10

score 0 · Answer 6 · answered Oct 03 '16 at 06:58

0

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.

answered Oct 03 '16 at 06:58

Stein-Magne Pedersen

1
1

score 0 · Answer 7 · answered Nov 07 '19 at 08:34

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.

score 0 · Answer 8 · answered Jul 07 '20 at 15:26

0

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

answered Jul 07 '20 at 15:26

Ashif

1

score -1 · Answer 9 · answered Nov 19 '18 at 16:46

-1

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

answered Nov 19 '18 at 16:46

Sherin Dharmarajan

1

Duplicated icons with toastr

9 Answers9