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

Question

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 1

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

Answer 2

Your problem is the toastContainer is not big enough, you should add a config like :
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
positionClass: 'toast-top-full-width'
});
});
This way, the container of all your toast will be full width, and then when you call a toast you can set his size to full-width.