2015-01-21 84 views
1

我正在使用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> 

非常感謝你提前。

回答

4

您可以爲您的烤麪包機改變classtoast-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