6

I'm using AngularJS-Toaster to popup notifications in my app. For the frontend I'm using bootstrap.

Using the class 'container' I have a grid of 1200px. Inside I have a div with the popup notifications.

I would like to adjust the width of the popup notification to the same width that the container where this toaster is included in. I saw that toaster has a parameter 'position-class' to change the position and even the width of the popup, like for example 'toast-top-full-width', but using that I get a full screen notification, it is not adjusting to the container where it is included. I guess this is something that could be done using Css, but how? Could you please help me?

Here my html code:

<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>

Thank you very much in advance.

fgonzalez
  • 3,787
  • 7
  • 45
  • 79

3 Answers3

9

You can change class for your toaster to toast-top-full-width

 <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'}"></toaster-container>

OR you can create custom css rule and apply it to your toaster ie.

  <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'my-toast-class'}"></toaster-container>

Check example :- http://plnkr.co/edit/1nZygN?p=preview

mujaffars
  • 1,395
  • 2
  • 15
  • 35
sylwester
  • 16,498
  • 1
  • 25
  • 33
6

You could just use CSS to set the width to 1200px or 100% or any other length.

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

The value 'auto' is already defined for the margin-left and margin-right properties. So if one wants a little bit of spacing on the sides, I'd use:

#toast-container > .toast {
    max-width: 1200px;
    width: 90%;
}
chri3g91
  • 1,196
  • 14
  • 16
2

We can set the toastr options in javascript file as below:-

toastr.options = {
   "positionClass": "toast-bottom-full-width",
   ...
};
20B2
  • 2,011
  • 17
  • 30