React-toastify: Sticky toast

[bologer]

I was going through documentation and did not find anything about sticky toasts.

Lets say I have long page, when I make toast something like this:

toast.success("Some lol message", {
    onClose: () => self.loadComments(),
    autoClose: false,
    position: toast.POSITION.TOP_CENTER,
    draggable: false,
});

The toast will be shown at the very top of the page, however I will not see it, as I am somewhere in the bottom of the page.

What to do in this case? Is it possible somehow to stick toast to the top center of the page and make it fixed position (or something close to it), so it moved after user.

[fkhadra]

Hello @bologer,

The toast position by default is set to 'fixed'. It should stick to the top or the bottom regarding the position you choose.

You can check the sample below

Could you reproduce the issue with codesandbox and share it ?

Thanks

[bologer]

@fkhadra what if you have page with iframe. Toast is shown inside iframe. Iframe has some height, e.g. 1000px, so you have some space to scroll down. Toast shown in the top right corner inside iframe. If I move down, toast inside the iframe stays at the top without following the screen.

[fkhadra]

Hey @bologer,

Sorry for the late reply. Did you try to overwrite the Toastify__toast-containe css class ? The position is set to fixed.

[bologer]

@fkhadra no I did not write default styles of the toast. I moved away from iframe, so I will close it I guess.

[bologer]

@fkhadra I would reopen this as I would like to know how to fix it.

Here is an example: https://codesandbox.io/s/optimistic-ives-xsfqo

Just as an example:
Assume you have a react application loaded in iframe. Iframe resizes with the content of the react application. Meaning if content of the iframe is 1500px, then iframe would be about that size. If users scrolls down to 1000px and I would like to create a toast, then it would be shown at the very top of the iframe which is outside of the user's viewport, so it is not seen by the user.

Is there any way to fix it? Or at least what is the possible solution to it?

[craigkovatch]

@bologer this should still work with position: fixed as it is relative to the viewport which, in the case of the iframe, is the bounding box of the iframe within its container.