angularjsangular-toastr

Why is angular-toastr not accepting the overriden postionClass.?

Plugin used: https://github.com/Foxandxss/angular-toastr

My intention is to create a toastr that spans the full with of the page on top and according to the documentation, positionClass: 'toast-top-full-width' will do the trick.

toastr.success('Hello world!', 'Toastr fun!', {
    positionClass: 'toast-top-full-width'
});

A peek into the plugins css also validate the claim.

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

But somehow, the code doesn't work. Whats wrong with my code?
Plunkr: http://plnkr.co/edit/2O6hjk5vnMUWWULNK9hs?p=preview

Solution

  • You need to configure the toast in the angular config.

    var app = angular.module('app', ['ngAnimate', 'toastr']);

 app.config(function(toastrConfig) {
   angular.extend(toastrConfig, {
    positionClass: 'toast-top-full-width'
   });
 });

 app.controller('toastr-demo', function($scope, toastr) {
    toastr.success('Hello world!', 'Toastr fun!');
 });

    Plunker: http://plnkr.co/edit/pdstz2WkJqdi1Qw0R1pX?p=preview