Replies: 2 comments 3 replies
-
|
A caveman way i usually debug transitions with, is just by slowing it down. Should give you time to inspect the toast DOM and CSS to see what might be causing the shift. .b-list-leave-active {
transition: all 60s cubic-bezier(0.55, 0, 0.1, 1);
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this advice! I reduced my app to a single empty component and stripped out all the custom CSS, but it still didn't fix it. Finally, just playing around, I came across this simple solution that seems to be doing the trick: .toast.b-list-leave-active {
min-width: $toast-max-width;
}This still doesn't feel right, but I'm going with it for now! |
Beta Was this translation helpful? Give feedback.
-
|
Why did you not make this a bug report 🤔 #2216 |
Beta Was this translation helpful? Give feedback.
-
|
Since I wasn't able to reproduce it on Stackblitz, I assumed it was a conflict with the CSS in my project! |
Beta Was this translation helpful? Give feedback.
-
|
Admittedly I had seen the issue before, just forgot about it |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
In my project, whenever I show a (top-center) toast, it initially displays fine, but when it hides, it gets squished into a tall vertical line before it shifts left and fades out. I tried to capture a screenshot of what I mean. You can see the title "Broker Dashboard" at the top, and the green body of the toast is extremely faint going all the way down the page.
This works fine on Stackblitz, so I know I must have some conflicting CSS in my project somewhere, but I've had no luck in identifying it. Does anyone have any idea what might be causing this?
Beta Was this translation helpful? Give feedback.
All reactions