Position bottom bug

[notcod]

I have problem with all bottom positions with v10, here is image: All toasts are bellow visible line, and on hover they are going down instead up. Top positions works fine.

[fkhadra]

Hey @notcod please share a codesandox that reproduce the bug, without that I won't be able to help thank you

[alajmo]

Here's a codesandbox of the issue (seems only to be when you use stacked, otherwise it works):

Link

[aminBenSlimen]

Seems like stacked is weird with other options, i solved this one with moving the position option from the toast emitter to the ToastContainer .

toast("You cannot se me because I'm drowning :(", {
            // position: "bottom-left", Remove this one
            autoClose: 2500,
});

Put it here <ToastContainer stacked position="bottom-left" />

it's also worth mentioning that it's also buggy when you set newestOnTop to true, the ordering is messed up until you hover and unhover again.

[a-Marino]

Seems like stacked is weird with other options, i solved this one with moving the position option from the toast emitter to the ToastContainer .

toast("You cannot se me because I'm drowning :(", {
            // position: "bottom-left", Remove this one
            autoClose: 2500,
});

Put it here <ToastContainer stacked position="bottom-left" />

it's also worth mentioning that it's also buggy when you set newestOnTop to true, the ordering is messed up until you hover and unhover again.

Had the same issue and this fixed it for now

[svarup]

I resolved this in nextjs by creating multiple toast container in layout.tsx file and make sure we use position param there and not in toast message config.

layout.tsx

<ToastContainer
    stacked
    position="top-right"
  />
    
<ToastContainer
  stacked
  position="bottom-right"
  containerId="bottom-right"
/>

as you can see in above, the first container does not have containerId so it will make it the default container.

// component.tsx

toast('Hello', {
      containerId: 'bottom-right',
      style: {
        right: 0,
      }
});

// component.tsx

toast('Hello', {
      position: 'top-left'
});

this will use first default container as we did not specified containerId