个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在使用 AngularJS-Toaster 在我的应用程序中弹出通知。对于前端，我使用 Bootstrap 。
使用“容器”类，我有一个 1200 像素的网格。在里面我有一个带有弹出通知的 div。
我想将弹出通知的宽度调整为与包含此 toastr 的容器相同的宽度。我看到 toastr 有一个参数'position-class'来改变位置甚至宽度弹出窗口，例如“toast-top-full-width”，但使用它我得到一个全屏通知，它没有调整到包含它的容器。我想这可以使用 Css 来完成，但是怎么做呢？你能帮帮我吗？
这是我的 html 代码:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
非常感谢您。
最佳答案
您可以将 toastr 的 class 更改为 toast-top-full-width
<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'}"></toaster-container>
或者您可以创建自定义 css 规则并将其应用于您的 toastr 。
<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'my-toast-class'}"></toaster-container>
关于html - 如何调整 toastr 弹出宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28057622/
25
4
0
如何在 toastr 中显示多行错误消息？ 我已经格式化了我的错误消息，如下所示 "Please fix the following: \r\nFirst Name is required\r\nLa
在 toastr 消息中，我有几个图标在彼此之上。这是它的样子: 我的代码很简单，我在 Ajax 调用后使用 toastr: success : function(reponse) {
有什么办法可以改变吗？我尝试将 toastClass 定义为不透明度设置为 1 的类，但没有看到任何变化: .toast-style{ opacity: 1; } toastr.options.
我正在使用 ngx-toastr图书馆。我正在启动位于屏幕顶部中央的消息，如下所示: @Injectable() export class MessageService { construct
我正在使用 Angular toastr 并且我坚持在隐藏上一个 toastr 和显示下一个 toastr 之间传递延迟。一次应该只有一个 toastr 。我隐藏并显示它，但没有视觉差异，并且 toa
我正在使用 toastr jquery 插件。下面是链接 https://github.com/scottoffen/jquery.toaster 我在这里面临两个问题 目前点击按钮时会显示多个通知(
我正在尝试 toastr，但我不断收到一个奇怪的 TypeError，这对我来说没有任何意义。 TypeError: Cannot read property 'extend' of undefine
我正在使用 angular2-toaster在我的 Angular 应用中 很简单， 在组件模板中定义 toastr 容器 并且您使用 ToasterService 类型的 toasterServi
我想使用toastr来通知用户。我已关注this设置指南。但我收到错误消息:Uncaught TypeError: toastr is not a function。我查看了网络选项卡，文件加载正确。
我正在尝试将 toastr 带入我的应用程序中。我做了一些非常简单的事情: bundles.Add(new ScriptBundle("~/Content/example-scripts")
shared.module.ts import { animate, state, style, transition, trigger } from '@angular/animations'; i
我在 Angular 6 中使用 ngx-toastr 进行 http 错误通知，就像在 httpInterceptor 中注入(inject) ToastrService export cl
我安装了react-toastr并集成了示例代码。 import React from 'react' import { ToastContainer } from 'react-toastr'; c
下面的代码会弹出一个 toastr : function showMessage(code, type) { ConfigService.getErrorMessage(cod
我正在使用 typescript 创建一个非常简单的 Web 应用程序。现在，它要做的就是创建一个矩形并显示该区域的信息提示。不幸的是， toast 从未出现。该代码行已执行，并且 Internet
我喜欢用 toastr 做的事情，但我似乎无法让它发挥作用。 来自官方页面... (1) Link to toastr.css (2) Link to toastr.js (3) Use toastr
从应用程序注销后，我必须显示 toastr 。这就是我正在尝试的。在这里，我在注销方法后调用 toastr 。 _this.logout().then({ success: function (r
我是 Angular js 的新手。我正在尝试显示错误消息 View toaster() .我在谷歌上搜索，但没有找到正确的结果。当我点击 cancel()按钮，我会收到一条错误消息，提示 toast
我正在尝试使用 Toastr 通知 ( https://github.com/CodeSeven/toastr )。它们工作正常，但问题是它们只出现在右上角。我可以更改位置的任何内容，但它们将始终显示
我正在使用 toastr js 插件 - toastr - 并更改了 css 颜色，但是，我不知道如何创建正确的 png/base64 部分？ 原文: .toast-info { backgrou
我是一名优秀的程序员,十分优秀！