带有 toastr 的重复图标

Posted

技术标签:

【中文标题】带有 toastr 的重复图标【英文标题】:Duplicated icons with 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웃 这个问题帮助了我。如果它不存在,我可能会浪费几个小时才能弄清楚这一点。谢谢! 【参考方案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 种不同的状态,排名并避免重复。 转换时自动关闭。 奥特

【讨论】:

以上是关于带有 toastr 的重复图标的主要内容,如果未能解决你的问题,请参考以下文章

如何更改JFrame图标[重复]

左侧内的Swift文本字段添加图标[重复]

如何应用字体真棒图标颜色-包括白色阴影而不仅仅是轮廓[重复]

将图标浮动在文本框上而不使用绝对位置 [重复]

如何从iOS中保留后退图标的LeftNavigation Bar按钮中删除后退文本[重复]

带有大图片、大图标和小图标的通知