带有toastr的复制图标

Question

我在toastr消息中有几个图标在彼此之上。这就是它的样子：

我的代码非常简单，我在Ajax调用之后使用toastr：

 success        : function(reponse) {
            $(event.target).next('i').hide();
            if (reponse.retour == 0){
                toastr["success"](reponse.texte_retour);
                } else {
                toastr["error"](reponse.texte_retour);
                }
        }

无论类型（错误，信息，警告，成功），我都有同样的问题。出了什么问题？

Answer 1

解决此问题的另一种方法是在加载inspinia css之前加载toastr css。这样Inspinia用自己的自定义css

覆盖toastr css

Answer 2

问题解决了。

我使用＆＃39; inspinia框架＆＃39;。在它的样式表中已经有关于toastr的somme css声明：

我评论了这几行，现在它工作正常。不知道＆＃34; inspinia＆＃34;是否是一个bug。侧。

多米尼克

Answer 3

我有同样的问题，我检查了我的css的参考链接，我发现我正在打电话＆＃34; toastrStyles＆＃34; css之后＆＃34; inspania＆＃34; CSS。我打电话给我的＆＃34; toastrStyles＆＃34;呼叫之前的css＆＃34; inspania＆＃34; css，它对我有用。

Answer 4

看起来您正在使用font-awesome图标以及默认图标。

将此添加到您的CSS应该通过隐藏默认图像来修复重叠图标。

#toast-container > div.toast {
    background-image: none !important;
}

此外，如果您想垂直居中，请添加

#toast-container > .toast:before {
    position: absolute;
    margin: auto 1.5em auto -1.5em;
    top: 50%;
    transform: translateY(-50%);
}

Answer 5

任何css自定义都无法完成。只需保留你的 在boostrap之后立即使用tosstr css（如果使用），在任何其他css链接之前。它将毫无问题地工作。

喜欢这个：

 <link href="~/Content/bootstrap.min.css" rel="stylesheet">
 <link href="~/Content/plugins/toastr/toastr.min.css" rel="stylesheet">

.... ......之后剩下的链接来了

Answer 6

我遇到了与Inspinia相同的问题。原因是我在inspinia css文件（style.css）之后加载了toastr css文件，导致toastr css覆盖了inspinia样式。

Answer 7

就我而言，更改CSS导入顺序根本没有帮助。在这种情况下，您也可以覆盖类：

#toast-container > .toast-error:before {
  content: none;
}

#toast-container > .toast-success:before {
  content: none;
}

它类似于@Dom答案，但不更改inspinia或烤面包代码本身。

Answer 8

先加载Toastr CSS，再为我解决此问题。

Answer 9

使用ng7-snack-bar https://angular-4hvr9p.stackblitz.io 4个不同的州，排名并避免重复。 过渡时自动关闭。 AOT