如何修复 SweetAlert2 中奇怪的成功和错误图标?

2023-12-28

因此一月份 SweetAlert2 100% 正常。成功和错误图标上没有错误。但二月之后,图标看起来很奇怪,动画也很糟糕。

我尝试更新 CDN,因为 2 天前 SweetAlert2 更新了。但问题仍然没有解决。也许你可以帮助我。


这是图像:

成功图标错误 https://i.stack.imgur.com/rRvBb.png

错误图标错误 https://i.stack.imgur.com/36jrO.png

这是代码。我正在使用 flashdata 来显示警报。

<?php if ($this->session->flashdata('success-reg')): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Kamu berhasil daftar!',
    text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
    showConfirmButton: false,
    timer: 2500
})
</script>
<?php endif;?>

同样的问题在这里:它发生是因为 font-size 属性<span>在文档的其余部分。 在我的例子中,为了解决这个问题,我强制将字体大小更改为 16px 到“创建”成功和错误图标的特定类元素。

  • 对于成功图标:
.swal2-success-line-tip, .swal2-success-line-long {
  font-size: 16px !important;
}
  • 对于错误图标:
.swal2-x-mark-line-right, .swal2-x-mark-line-left {
  font-size: 16px !important;
} 

它可能不是最优雅的解决方案,但它确实有效。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何修复 SweetAlert2 中奇怪的成功和错误图标? 的相关文章

  • 如何查明在 Chrome 控制台中按下按钮时会调用哪些函数?

    我正在尝试自学 Google Closure javascript 库 我正在检查 TreeControl UI 小部件 如何使用Chrome控制台分析当我点击下面演示中的 剪切 按钮时运行了哪些功能 例如 我可以为此设置一个断点吗 我尝试
  • 当 eslint 从子文件夹运行时无法解析相对模块路径

    当我从存储库的根文件夹运行 eslint 时 一切运行正常 没有错误 但是当我从子文件夹运行时 我会得到大量导入 未解决的问题 而当我从根目录运行时则不会发生这种情况 reporoot subfolder0 subfolder1 MyFil
  • 将 JSON 字符串传递给 Django 模板

    我一直在用头撞墙 试图找出为什么我无法将从 Django 模型生成的 JSON 字符串传递到模板的 javascript 静态文件中 事实证明 问题不在模型级别 使用serializers serialize 在脚本本身中放入相同的字符串将
  • Doctrine QueryBuilder 重用部件

    我想计算所有符合我的条件的字段 并使用学说查询生成器逐页获取它们 我生成的查询取决于我的过滤器字段 第一部分是计算记录 以便我可以计算页数 qb em gt createQueryBuilder qb gt select COUNT m i
  • PHP随机输出数组元素

    我如何从大约 20 个元素的数组中随机回显 5 个元素 Thanks 这有效吗 values array rand input 5 或者 作为更灵活的功能 function randomValues input num 5 return a
  • 如何编辑 Woocommerce 单一产品元模板中显示的内容?

    我正在为客户做一些工作并使用 wordpress woocommerce 他们要求我将类别移动到我已经完成的单个产品页面上的产品名称下 但他们不希望它打印 类别 类别 1 类别 2 等 他们希望删除 类别 并且它实际上只列出类别的名称 而不
  • empty() 在对象的非空属性上返回 TRUE

    我遇到了一个非常奇怪且意想不到的问题 empty 正在返回TRUE由于我不知道的原因 在一处非空的房产上 class MyObject private property public function construct property
  • 需要将焦点放在react中的div上

    我有一个之前用 H1 标签包裹的文本 页面加载后 我需要专注于该文本 为了方便起见 我将它包装在 div 中 render const translate billing primaryContactSelection true this
  • LINQ SingleOrDefault() 等效项

    在 Typescript 中 我经常使用这种模式 class Vegetable constructor public id number public name string var vegetable array new Array
  • 如何使 Meteor 上的服务器可以访问文本文件

    我很惊讶我无法在这里搜索我的答案 似乎没有其他人遇到这个问题 当您运行meteor服务时 js html等被打包在 meteor local build文件夹中 但它似乎排除了不是js或html的内容 我有一个名为 magicsets 的文
  • bootstrap-datetimepicker 仅显示日期

    我正在用这个repo https github com smalot bootstrap datetimepicker由 smalot 提供 我只想选择并显示日期 对于其他一些地方 我显示数据和时间 因此选择此存储库 我可以设法仅使用它来选
  • queue.js 是如何工作的?

    我一直试图理解如何Mike Bostock 的queue js https github com mbostock queue blob master queue js有效 但我看不出它是如何工作的 我不明白的部分是代码如何设法继续执行回调
  • CSS - 最大宽度和椭圆

    我有一个包含文本的跨度 我希望跨度扩大到最大 500px 以容纳里面的文本 达到最大值后 我希望文本为任何溢出最大宽度的文本显示省略号 这可能吗 我尝试了以下方法 但这并没有达到目的 Thanks position absolute top
  • 掩码输入数字 - 百分比

    如何通过 jQuery 创建具有百分比的数字掩码输入 我是否让输入仅接受三个数字 并在用户完成输入时在数字后添加百分号 keyup 我不使用插件 例子 1 Or 30 Or 99 Or 100 Or 200
  • 在 gulp 和 browsersync 问题中观看新文件

    我使用 browsersync 在文件更改时重新加载浏览器 而且它工作完美 但是当我创建新文件 例如 html scss js 时 bowsersync 不起作用 如何解决这个问题 gulpjs Browser Sync gulp task
  • Twitter 引导选项卡和 JavaScript 事件

    我正在一个项目中使用 twitter bootstrap 特别是它的选项卡功能 http twitter github com bootstrap javascript html tabs http twitter github com b
  • ExtJS:简单表单忽略 formBind

    我有一个小问题让我发疯了好几天 我有一个表单面板 Ext define EC view PasswordPanel extend Ext form Panel alias widget pwdpanel bodyPadding 15 ini
  • jQuery 不断 ping 以获得 Ajax 响应

    如何使用 jQuery 不断运行 PHP 脚本并每秒获取响应 并将鼠标上的少量数据发送到同一脚本 我真的需要添加一些随机扩展才能让这样一个简单的计时器工作吗 迭代是人类的 递归是神圣的 L 彼得 多伊奇 http www devtopics
  • 如何选中表格中输入文本焦点上的复选框

    我试图在输入文本焦点上检查表 DOM 中的复选框 但无法访问复选框元素 但我的焦点正在工作 这是我的 jsfiddle 链接https jsfiddle net 9qha9vft https jsfiddle net 9qha9vft 这是
  • Drupal 模板/主题资源或建议?

    我有兴趣为我正在开发的 Drupal 网站创建自定义主题 我是 Drupal 的新手 但是我在处理构建主题 CSS PHP HTML 所需的基本概念方面拥有相当多的经验 所以 我的问题是 我从哪里开始 有创建 Drupal 主题的规范指南吗

随机推荐

  • 如何将文字放在图像的中间

    你好 使用 CSS 我试图将一些文本放在图像的中心 所以它看起来像这样 div P I This is some text C div 我怎样才能达到这个结果 不知道这是否有帮助 图像是 32x32 像素 img vertical alig
  • Doctrine2 中 JOIN ON 和 JOIN WITH 有什么区别?

    Doctrine2 中 JOIN ON 和 JOIN WITH 有什么区别 我在手册中找不到任何相关信息 ON替换原来的连接条件 WITH为其添加一个条件 Example Album OneToMany gt Track Case One
  • 子图日期时间 X 轴刻度未按预期工作

    我正在尝试绘制许多图 以下是数据组织方式的示例 我的目的是使用谷歌分析数据构建一系列几小时或几天 比如一周 7 天 或一天 24 小时 的子图 我的索引是日期时间对象 这是当轴正确完成时单个图的外观示例 from datetime impo
  • 了解 Traceview

    我想了解跟踪视图是如何工作的 我尝试使用traceview 分析一种方法 但有一个疑问 我已附上 trace 的快照 它表示大部分时间由蓝色标记的 顶级 占用 但没有更多信息 这个方法何时执行或者执行什么功能 谁能向我解释一下为什么它花费这
  • 在scala中调用akka actor的方法

    我有一个演员定义如下 class nodeActor ID String extends Actor 其中包含一个方法 用于在启动之前设置 actor def addRef actor ActorRef 我这样实例化这个演员 val nod
  • Junit ant 任务 - 未找到 JUnitTask

    我正在尝试从我的 ant build xml 文件运行 Junit 测试 我读here http ant apache org manual Tasks junit html您可以使用 junit jar 文件 而不是使用位于 ant ho
  • 如何消除 Flutter 中两个容器之间的空间?

    我在 Column 小部件内有两个高度 250 的容器 这两个容器小部件之间没有任何其他小部件 但我仍然可以看到两个容器之间的空间很小 这是我的代码 import package flutter material dart void mai
  • 什么是spark.driver.maxResultSize?

    The ref http spark apache org docs latest configuration html says 每个分区的所有分区的序列化结果总大小的限制 激发行动 例如收集 应至少为 1M 或 0 无限 如果总大小超过
  • 如何以编程方式将 Excel 数据导入到 Access 表中?

    我已经阅读了一些相关主题 但仍然留下了这个问题 我想在 Access 数据库应用程序中编写一个函数 以编程方式导入从前两行 标题和单位分隔符 之前开始的 Excel 数据 我希望完成以下任务 能够动态选择我要导入的 Excel 文件 可能使
  • 选择nodeValue但排除子元素

    假设我有这个代码 p Hello this is a description a href Click here for more a p 如何选择的nodeValuep但排除a它的内容是什么 我当前的代码 result xpath gt
  • 步骤中未找到此类 DSL 方法“管道”

    我在 Jenkins 中的声明性管道脚本中不断收到此错误 No such DSL method pipeline found among steps 我的脚本是这样的 pipeline agent any stages stage Exam
  • 谷歌存储桶文件链接可公开访问,即使不公开?

    我正在玩谷歌桶 该存储桶不是公共的 这些文件也不公开 我上传 csv 文件后 我点击它 它在谷歌浏览器的浏览器中显示了带有一个很长的复杂 url 链接的文件 现在 如果我使用该链接并在另一个没有登录谷歌帐户的浏览器 例如 IE 中打开 我就
  • C# - 应用程序显示函数之间的所有依赖关系?

    是否有某种应用程序可以分析源代码并以图形方式显示函数之间的所有连接 我需要它来处理我正在处理的遗留代码 它很大 功能齐全 而且写得很糟糕 NDepend http www ndepend com 正是这样做以及更多其他事情 代码指标
  • 汇编程序文件 (*.asm) 的 gedit 语法突出显示

    默认情况下 gedit 不进行语法高亮显示 asm files 如何添加对此语言的支持 以下步骤应该足够了 wget http www carminebenedetto net downloads asm intel lang sudo c
  • 无法使用 PowerMock 模拟 java.lang.System#exit(int) 方法

    我的应用程序有一个流程 最后是方法System exit int 正在被呼叫 我正在尝试通过使用 TestNG 运行测试来测试此流程 然而 在运行测试时 尽管测试已完成 但我收到了这条奇怪的消息 只是为了找到根本原因 我删除了System
  • 在 AngularJS 中使用 $controller 时如何消除缩小错误

    angular module mainApp controller dynamicRouteController scope controller routeParams function scope controller routePar
  • 如何在mathematica中重载Times和Plus进行矩阵乘法

    我想要超载Times and Plus例如 对于mathematica中的矩阵乘法 让Times be BitAnd 并且加上是BitOr 然后进行矩阵乘法 无论如何 有没有一种简单的方法可以做到这一点 而无需重写我自己的矩阵乘法 Than
  • Flask 多重处理

    我正在尝试开发一个小型应用程序 它基本上会根据用户提供或请求的数据集绘制一些图表 process order 函数应该并发运行不同的数据集 由于某种原因 我只得到第一张图 而不是第二张和连续的图表 我与不同的用户打开了不同的浏览器会话 得到
  • 如何在linq queryable的表达式树中调用sql标量函数?

    我正在为 Iqueryable 创建 lambda 表达式以从集合中获取值 但我想将该值转换为其他数据类型 例如 int 或decimal 因此 由于我无法将 C 转换与 Iqueryable 一起使用 因此我在 sql 中创建了用户定义的
  • 如何修复 SweetAlert2 中奇怪的成功和错误图标?

    因此一月份 SweetAlert2 100 正常 成功和错误图标上没有错误 但二月之后 图标看起来很奇怪 动画也很糟糕 我尝试更新 CDN 因为 2 天前 SweetAlert2 更新了 但问题仍然没有解决 也许你可以帮助我 这是图像 成功