Multiple toasts with different positions take first position

[kurtcarpenter]

Create a toast. While the first toast is visible, create a second toast with a different position- the second toast will be placed with the first, ignoring its own setting.

e.g.

toastr.success('foo', 'qaz', { positionClass: 'toast-top-right', timeOut: -1 })
toastr.success('bar', 'baz', { positionClass: 'toast-bottom-left' })

results in

<div role="alert" aria-live="polite" class="toast-top-right" id="toast-container">
    <div style="display: block;" class="toast toast-success">...</div>
    <div style="display: block;" class="toast toast-success">...</div>
</div>

The library looks for a given container ID, which defaults to "toast-container". While it is possible to set this with an option, e.g. { containerId: "myContainer" }, this is not well-documented behavior. Additionally, it is a major usability concern to force an extra, undocumented option in order to position correctly, i.e. achieve expected behavior.

[jonibatista]

I tried your "hack" @kurtcarpenter but it didn't work well. As you can see here if we specify the cotainerId we lost the style of the toastr.

Does it mean that to use your "hack" we need to define the style for the new containerId?

[farazu101]

Can be corrected with two changes

1. IN FUNCTION getContainer
   $container = $('#' + options.containerId + '[position = ' + options.positionClass + ']');

function getContainer(options, create) {
                if (!options) {
                    options = getOptions();
                }
                $container = $('#' + options.containerId + '[position = ' + options.positionClass + ']');
                if ($container.length) {
                    return $container;
                }
                if (create) {
                    $container = createContainer(options);
                }
                return $container;
            }

2. IN FUNCTION createContainer
   .attr('position', options.positionClass)

            function createContainer(options) {
                $container = $('<div/>')
                        .attr('id', options.containerId)
                        .attr('position', options.positionClass)
                        .addClass(options.positionClass);

                $container.appendTo($(options.target));
                return $container;
            }

[grantiverson]

I think this is the same issue as "position no change" #386

Here's an example of the issue: https://codepen.io/grantiverson/pen/GGMKzV