naveen naveen - 6 months ago 32
AngularJS Question

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

Answer

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