带有 toastr 的重复图标答案

【问题标题】：Duplicated icons with toastr带有 toastr 的重复图标
【发布时间】：2016-04-30 16:47:27
【问题描述】：

我在 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);
                }
        }

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

【问题讨论】：

问题是多个图标相互重叠？
绝对是的。不明白为什么。
问题解决了。我使用“inspinia 模板”，并且 css 已经在这个模板中声明了。所以没有必要在 html 文件中复制 css 样式。现在它工作正常。对不起，谢谢你的问题。谢谢。多米尼克
没问题！这可能是将来发生在其他人身上的事情，所以这个问题可能值得保留。您可以自己发布答案。我将编辑标题以使问题更清楚。
@Pekka웃 这个问题帮助了我。如果它不存在，我可能会浪费几个小时才能弄清楚这一点。谢谢！

标签： toastr

【解决方案1】：

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

【讨论】：

这个解决方案对我有用，并允许保留其他配置选项。

【解决方案2】：

问题解决了。

我使用“inspinia 框架”。在其样式表中已经有一些关于 toastr 的 CSS 声明：

我评论了这几行，现在它工作正常。不知道这是否是“inspinia”方面的错误。

多米尼克

【讨论】：

Inspinia 更新后该解决方案将丢失。 @Reyske 解决方案对我有用，不会覆盖默认的 Inspinia 样式。

【解决方案3】：

我有同样的问题，我检查了我的 css 的参考链接，我发现我在 "inspania" css 之后调用了 "toastrStyles" css。我在调用“inspania”css 之前调用了我的“toastrStyles”css，它对我有用。

【讨论】：

不客气。您也可以删除不再需要的 cmets ;-)

【解决方案4】：

看起来您正在使用字体很棒的图标以及默认图标。

将此添加到您的 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%);
}

【讨论】：

【解决方案5】：

任何 css 定制都不需要做任何事情。只需保留您的在 boostrap（如果使用）之后和任何其他 css 链接之前立即 toastr css。它可以正常工作。

喜欢这个：

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

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

【讨论】：

【解决方案6】：

我在使用 Inspinia 时遇到了同样的问题。原因是我在 inspinia css 文件 (style.css) 之后加载了 toastr css 文件，导致 toastr css 覆盖了 inspinia 样式。

【讨论】：

【解决方案7】：

在我的情况下，更改 css 导入顺序根本没有帮助。如果你也遇到这种情况，你可以覆盖类：

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

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

它类似于@Dom 答案，但不改变 inspinia 或 toastr 代码本身。

【讨论】：

【解决方案8】：

在任何其他 css 之前加载 toastr css，帮我解决这个问题。

【讨论】：

【解决方案9】：

使用 ng7-snack-bar https://angular-4hvr9p.stackblitz.io 4 种不同的状态，排名并避免重复。转换时自动关闭。奥特

【讨论】：