search

scttcper / ngx-toastr

🍞 Angular Toastr
https://ngx-toastr.vercel.app
MIT License
2.5k stars 360 forks source link

multiple ids: toast-container #894

Open sanderschnydrig opened 3 years ago

sanderschnydrig commented 3 years ago

When using one toast with positionClass 'toast-bottom' and one with 'toast-top' there are two divs with the same id added to the DOM with the #toast-container. This makes the HTML invalid and I haven't been able to reference both containers in javascript using the document.getElementById method.

sanderschnydrig commented 3 years ago

Of course I can use

document.querySelector('#toast-container.toast-top')

and

document.querySelector('#toast-container.toast-bottom')

respectively. Just wanted to point out it makes the HTML invalid.

Might it be a solution to use the overlay-container as and ID #overlay-container and append the #toast-container-{position} with the position of the toast-container? Like #toast-container-top, #toast-container-bottom, #toast-container-bottom-center or something like that?