6

我正在使用 AngularJS-Toaster 在我的应用程序中弹出通知。对于前端，我使用的是引导程序。

使用“容器”类，我有一个 1200 像素的网格。在里面我有一个带有弹出通知的 div。

我想将弹出通知的宽度调整为与包含此烤面包机的容器相同的宽度。我看到烤面包机有一个参数“位置类”来更改弹出窗口的位置甚至宽度，例如例如'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>

非常感谢您提前。

4

3 回答 3

9

您可以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

于 2015-01-21T00:42:41.713 回答
3

您可以只使用 CSS 将宽度设置为 1200 像素或 100% 或任何其他长度。

#toast-container > .toast {
  width: 1200px; /* width: 100% */
}

已经为 margin-left 和 margin-right 属性定义了值 'auto'。因此，如果一个人想要在侧面有一点间距，我会使用：

#toast-container > .toast {
    max-width: 1200px;
    width: 90%;
}
于 2021-03-12T10:55:32.883 回答
2

我们可以在 javascript 文件中设置 toastr 选项，如下所示：-

toastr.options = {
   "positionClass": "toast-bottom-full-width",
   ...
};
于 2019-01-25T04:21:41.797 回答