fgo*_*lez 3 html css css3 angularjs toastr
我正在使用AngularJS-Toaster在我的应用程序中弹出通知.对于我正在使用bootstrap的前端.
使用类'容器'我有一个1200px的网格.在里面我有一个带弹出通知的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 alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
非常感谢你提前.
您可以更换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
您可以仅使用 CSS 将宽度设置为 1200px 或 100% 或任何其他长度。
#toast-container > .toast {
width: 1200px; /* width: 100% */
}
已经为 margin-left 和 margin-right 属性定义了值“auto”。因此，如果有人想要两侧有一点间距，我会使用：
#toast-container > .toast {
max-width: 1200px;
width: 90%;
}
| 归档时间： |
|
| 查看次数： |
15050 次 |
| 最近记录： |