vue-toasted width

[LittleHChen]

Thanks for looking into this issue and sorry my poor english The problem is that the vue-toasted width will be change if i change the content, but the last one has not disappeared like this: How can we solve this problem? thanks!

[blahmonkey]

Same issue here. Each toast should be independent of the others.

While the toast main div has width: auto - when 2 toasts are visible, the width of both is kept the same, even if one has lower width content.

[mateeni-dev]

Hi, I have a similar issue.

I have a global full-width toast with duration: 0, and a default toast accessible as $toasted.error(...) on same page. Global toast is always visible. Default toast is triggered on errors which remains for 5 seconds.

Problem is that when default toast is triggered:

• my global toast is no longer full width and moves to the top right position.
• my default toast is same width as global toast even though it has less content.

I was really surprised to see this as I imagined a global toast would be independent of every other toast.

Can this behavior be changed? Is there any temporary solution to fix this quickly?

EDIT: I found out that a fix is available already ==> $toasted.group. I had to look around a bit to figure it out as this is not documented anywhere, so would be nice if it is in future.

For anyone who is looking for a solution, this is what I did to trigger a standalone toast that retains its width, position and other settings while a second toast (default) is triggered with default settings:

// create standalone toast
const full_width_toast = this.$toasted.group({
        fullWidth: true,
        fitToScreen: true,
        duration: 0
});
// trigger
full_width_toast.success("Standalone toast msg")
// clear
full_width_toast.clear()

[EricRabil]

This fixed it for me. You could remove the align-items: center; if you don't need it to be centered.

.toasted-container {
  align-items: center;
}

.toasted {
  width: fit-content;
}