Sticky toast

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.

[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?

[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.