Duplicated icons with toastr
up vote
12
down vote
favorite
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?
toastr
add a comment |
up vote
12
down vote
favorite
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?
toastr
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
6
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
1
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51
add a comment |
up vote
12
down vote
favorite
up vote
12
down vote
favorite
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?
toastr
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?
toastr
toastr
edited Jan 24 '16 at 10:50
Pekka 웃
353k1148381009
353k1148381009
asked Jan 24 '16 at 10:21
Dom
4531421
4531421
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
6
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
1
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51
add a comment |
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
6
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
1
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
6
6
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
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
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
1
1
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51
add a comment |
7 Answers
7
active
oldest
votes
up vote
20
down vote
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
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
add a comment |
up vote
9
down vote
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
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
add a comment |
up vote
4
down vote
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.
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
add a comment |
up vote
3
down vote
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%);
}
add a comment |
up vote
1
down vote
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
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
-1
down vote
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
add a comment |
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
20
down vote
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
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
add a comment |
up vote
20
down vote
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
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
add a comment |
up vote
20
down vote
up vote
20
down vote
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
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
Reyske
900618
900618
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
add a comment |
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
2
2
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
This solution worked for me and allowed to keep other config options.
– Juan Pablo Ugas
Sep 26 '16 at 18:26
add a comment |
up vote
9
down vote
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
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
add a comment |
up vote
9
down vote
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
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
add a comment |
up vote
9
down vote
up vote
9
down vote
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
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
4531421
4531421
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
add a comment |
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
1
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
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
add a comment |
up vote
4
down vote
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.
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
add a comment |
up vote
4
down vote
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.
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
add a comment |
up vote
4
down vote
up vote
4
down vote
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.
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 7:55
Ilham Ibrahimkhalilov
413
413
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
add a comment |
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
1
1
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
You are welcome. And you can delete the no longer required comments, too ;-)
– GhostCat
Dec 15 '17 at 12:54
add a comment |
up vote
3
down vote
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%);
}
add a comment |
up vote
3
down vote
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%);
}
add a comment |
up vote
3
down vote
up vote
3
down vote
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%);
}
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%);
}
answered Feb 26 '16 at 13:10
Japheth Adhavan
916
916
add a comment |
add a comment |
up vote
1
down vote
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
add a comment |
up vote
1
down vote
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
add a comment |
up vote
1
down vote
up vote
1
down vote
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
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 6:32
answered Apr 19 '17 at 6:27
Praveen Kumar Rejeti
577
577
add a comment |
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
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 3 '16 at 6:58
Stein-Magne Pedersen
11
11
add a comment |
add a comment |
up vote
-1
down vote
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
add a comment |
up vote
-1
down vote
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
add a comment |
up vote
-1
down vote
up vote
-1
down vote
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
answered Nov 19 at 16:46
Sherin Dharmarajan
1
1
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f34974596%2fduplicated-icons-with-toastr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The problem is that there are multiple icons overlapping each other?
– Pekka 웃
Jan 24 '16 at 10:26
Yes absolutely. Don't understand why.
– Dom
Jan 24 '16 at 10:32
6
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
1
@Pekka웃 this question helped me. If it didn't exist, I'd probably lost a couple of hours until figuring this out. Thanks!
– Alisson
Jul 16 '16 at 19:51