search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Positions are not working correctly (in stacked) #1048

Open mahtifarahani opened 5 months ago

mahtifarahani commented 5 months ago

Bug

What is the current behavior? If you don't define a position in the container, you will see that the position is wrong after defining the bottom position in each toast individually in stacked mode.

What is the expected behavior? If I did not define any position in the container and the bottom position was defined separately in each toast, the stack should work correctly, now it considers the position of the top.

example :

toast('Wow` so not easy!', {
position: 'bottom-left'
})
<ToastContainer stacked />

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React V18.2.0 / Google Chrome Version 120.0.6099.224 (Official Build) (64-bit) / Windows 11 / No

fkhadra commented 5 months ago

Hey @mahtifarahani, thanks for pointing that out. This is actually a limitation from the implementation, the stacked toasts must be bound to the container.So when using the stacked container you can not individually position the toasts, this is where the multi containers support comes handy. I'll document it.