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:



enter image description here



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?










share|improve this question
























  • 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















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:



enter image description here



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?










share|improve this question
























  • 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













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:



enter image description here



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?










share|improve this question















I have several icons on top of each other in a toastr message. This is what it looks like:



enter image description here



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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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


















  • 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












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






share|improve this answer

















  • 2




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


















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 :



enter image description here



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






share|improve this answer

















  • 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




















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.






share|improve this answer



















  • 1




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


















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





share|improve this answer




























    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






    share|improve this answer






























      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.






      share|improve this answer




























        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






        share|improve this answer





















          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          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

























          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






          share|improve this answer

















          • 2




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















          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






          share|improve this answer

















          • 2




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













          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






          share|improve this answer












          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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














          • 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












          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 :



          enter image description here



          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






          share|improve this answer

















          • 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

















          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 :



          enter image description here



          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






          share|improve this answer

















          • 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















          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 :



          enter image description here



          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






          share|improve this answer












          The issue is solved.



          I use 'inspinia framework'. in its style sheet there is already somme css declaration about toastr :



          enter image description here



          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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
















          • 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












          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.






          share|improve this answer



















          • 1




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















          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.






          share|improve this answer



















          • 1




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













          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.






          share|improve this answer














          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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














          • 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










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





          share|improve this answer

























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





            share|improve this answer























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





              share|improve this answer












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






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Feb 26 '16 at 13:10









              Japheth Adhavan

              916




              916






















                  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






                  share|improve this answer



























                    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






                    share|improve this answer

























                      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






                      share|improve this answer














                      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







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Apr 19 '17 at 6:32

























                      answered Apr 19 '17 at 6:27









                      Praveen Kumar Rejeti

                      577




                      577






















                          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.






                          share|improve this answer

























                            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.






                            share|improve this answer























                              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.






                              share|improve this answer












                              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.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Oct 3 '16 at 6:58









                              Stein-Magne Pedersen

                              11




                              11






















                                  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






                                  share|improve this answer

























                                    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






                                    share|improve this answer























                                      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






                                      share|improve this answer












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







                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Nov 19 at 16:46









                                      Sherin Dharmarajan

                                      1




                                      1






























                                           

                                          draft saved


                                          draft discarded



















































                                           


                                          draft saved


                                          draft discarded














                                          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





















































                                          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







                                          Popular posts from this blog

                                          Feedback on college project

                                          Futebolista

                                          Albești (Vaslui)