Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple toasts with different positions take first position #438

Open
kurtcarpenter opened this issue Jul 19, 2016 · 3 comments · May be fixed by #635
Open

Multiple toasts with different positions take first position #438

kurtcarpenter opened this issue Jul 19, 2016 · 3 comments · May be fixed by #635

Comments

@kurtcarpenter
Copy link

kurtcarpenter commented Jul 19, 2016 •
edited
Loading

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
Copy link

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
Copy link

farazu101 commented Feb 11, 2017 •
edited
Loading

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;
            }
  1. 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;
            }

disruptek added a commit to disruptek/toastr that referenced this issue Mar 24, 2017
@disruptek
per master issue CodeSeven#438
42730d7
TimFerrell added a commit that referenced this issue Apr 11, 2017
@TimFerrell
Merge pull request #505 from disruptek/multiple_positions
ac1be4c 
fix for multiple toasts with different positions; closes #438
@grantiverson
Copy link

grantiverson commented Jun 15, 2018 •
edited
Loading

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

@antriver antriver linked a pull request Dec 30, 2019 that will close this issue
Open
@zverev78 zverev78 mentioned this issue Dec 16, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix using multiple positions at the same time digitickets/toastr
4 participants
@jonibatista @kurtcarpenter @farazu101 @grantiverson