如何调整烤面包机的弹出宽度
Posted
技术标签:
【中文标题】如何调整烤面包机的弹出宽度【英文标题】：How to adjust toaster popup width 【发布时间】：2015-03-19 09:44:40 【问题描述】：我正在使用 AngularJS-Toaster 在我的应用中弹出通知。对于前端，我使用的是引导程序。
使用“容器”类，我有一个 1200 像素的网格。在里面我有一个带有弹出通知的 div。
我想将弹出通知的宽度调整为与包含此烤面包机的容器相同的宽度。我看到烤面包机有一个参数'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 src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
提前非常感谢您。
【问题讨论】：
【参考方案1】：您可以将烤面包机的class 更改为toast-top-full-width
<toaster-container toaster-options="'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'"></toaster-container>
或者您可以创建自定义 css 规则并将其应用于您的烤面包机，即。
<toaster-container toaster-options="'time-out': 3000, 'close-button':true, 'position-class':'my-toast-class'"></toaster-container>
检查示例：- http://plnkr.co/edit/1nZygN?p=preview
【讨论】：
【参考方案2】：您可以只使用 CSS 将宽度设置为 1200 像素或 100% 或任何其他长度。
#toast-container > .toast
width: 1200px; /* width: 100% */
已经为 margin-left 和 margin-right 属性定义了值 'auto'。因此，如果想要在两侧留出一点间距，我会使用：
#toast-container > .toast
max-width: 1200px;
width: 90%;
【讨论】：
使用了`#toast-container >div`。工作！谢谢。【参考方案3】：我们可以在javascript文件中设置toastr选项如下：-
toastr.options =
"positionClass": "toast-bottom-full-width",
...
;
【讨论】：
以上是关于如何调整烤面包机的弹出宽度的主要内容，如果未能解决你的问题，请参考以下文章