带有 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 的重复图标的主要内容,如果未能解决你的问题,请参考以下文章
如何应用字体真棒图标颜色-包括白色阴影而不仅仅是轮廓[重复]