CODEWITHSUNDEEP
angularjsangular-toastr
codeandcloud
codeandcloud

Reputation: 55200

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

Upvotes: 1

Views: 612

Answers (2)

lithium
lithium

Reputation: 229

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.

Upvotes: 1

fyasir
fyasir

Reputation: 2970

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

Upvotes: 2

Related Questions