How multiple show toasts with various options?

[shahovkit]

I need show toast for error with option "positionClass": "toast-top-right", and need show toast for warning with option "positionClass": "toast-bottom-right", but both toasts use only one setting.

CodePen

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-bottom-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
};
toastr.error('error','error');

var supportToastr =  toastr;
var options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": true,
    "progressBar": false,
    "positionClass": "toast-top-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": 0,
    "extendedTimeOut": 0,
    "closeClass": 'toast-close',
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
    "tapToDismiss": false
};
supportToastr.warning('warning','warning',options);

[zverev78]

Duplicate of #438

[ssammut]

I think that there is an easy way to manage different positionClass by specifying the containerId in the toastr options. Example:

toastr.options = {
    "positionClass": "toast-top-right",
};

toastr.success("default toastr position");

toastr.info('custom toastr position', '',
     {
         positionClass: 'toast-bottom-full-width',
         containerId: "toast-container-notifications"
     }
 )

The only change necessary to make this work is CSS. You need to find all css styling for #toast-container and replace that with [id^='toast-container']. You only need to make sure that you always name the containers with toast-container*