md-toast makes scroll bar appear during animation when positionned bottom #2936
Comments
|
+1 |
1 similar comment
|
+1 |
|
+1 |
6 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
3 similar comments
|
+1 |
|
+1 |
|
+1 |
|
to get rid of scrollbar, just put overflow:hidden to body. |
|
In my case i've solved attaching the controller which control the toast to the body element. |
|
+1 |
ThomasBurleson
added
resolution: won't fix
|
Works fine on online Docs. |
|
It works in the demo page because the demo's container has If this isn't going to be fixed, then it should be documented that to use mdToast you have to set its container to have |
|
+1 |
|
@rscottfree - Excellent point. This needs either a doc change or component improvement.
|
|
Bumping priority; will try to get it done in RC4. |
During animation, certain browsers would show scroll bars if the toast was positioned at the bottom of the parent container. Fix by adding a class to the parent which sets the overflow to hidden only during the animations. Also, update documentation with notes about positioning and recommendations. Fixes #2936.
During animation, certain browsers would show scroll bars if the toast was positioned at the bottom of the parent container. Fix by wrapping the animated portions in a div with hidden overflow. Also, update documentation with notes about positioning and recommendations. BREAKING CHANGE md-toast now applies the enter/leave animations to a wrapper div with a class `md-toast-wrapper`. If you have customized the animations or other styles of your toast, you will need to update your CSS to account for the new wrapper. Fixes #2936.
During animation, certain browsers would show scroll bars if the toast was positioned at the bottom of the parent container. Fix by wrapping the animated portions in a div with hidden overflow. Also, update documentation with notes about positioning and recommendations. BREAKING CHANGE md-toast now applies the enter/leave animations to a wrapper div with a class `md-toast-wrapper`. If you have customized the animations or other styles of your toast, you will need to update your CSS to account for the new wrapper. Fixes #2936.
During animation, certain browsers would show scroll bars if the toast was positioned at the bottom of the parent container. Fix by wrapping the animated portions in a div with hidden overflow. Also, update documentation with notes about positioning and recommendations. BREAKING CHANGE md-toast now applies the enter/leave animations to an inner div with a class `md-toast-content`. If you have customized the animations or other styles of your toast, you will need to update your CSS to account for the new wrapper. Fixes #2936.
During animation, certain browsers would show scroll bars if the toast was positioned at the bottom of the parent container. Fix by wrapping the animated portions in a div with hidden overflow. Also, update documentation with notes about positioning and recommendations. BREAKING CHANGE md-toast now applies the enter/leave animations to an inner div with a class `md-toast-content`. If you have customized the animations or other styles of your toast, you will need to update your CSS to account for the new wrapper. Fixes #2936. Closes #6029
|
In my case the scroll-bar is hidden shortly during the animation. This creates a "flickering" user experience every time the toast is displayed, especially when many toasts are "queued up" and the scroll-bar shows and hides multiple times. The CSS causing this should definitely be eliminated from the angular/material code. From angular-material.css: So, depending on what you want to achieve you could always override this: Hope this helps someone! /Jesper Wilfing |
|
@TheJesper Thank you for existing! |
|
in latest version they prefixed this class with an underscore. So: body._md-toast-animating { overflow: auto !important; } |
|
sorry for my lack of understanding, why is: md-toast-animating{ overflow:hidden!important } needed in the first place? |
|
sounds good! thanks |
|
I was having the same issue, fixed by wrapping my root component in md-content with flex set to 100. This also fixed the issue of the toast appearing mid screen when I scrolled. If you look at the html the body was not growing appropriately with the component content, unless this was added.
|
|
i have to say that the fix of overflow: hidden !important; is probably the worst possible fix to that error. breaks pages. |
|
+∞ |
|
Thanks @RyanHayden!! |
|
+1 |
and others
Hi guys,
Thanks for your constant enhancement of angular material design.
As you can see on CodePen where i reused the doc demo, the scroll bar appears during the appear/disappear animation of a
md-toastcomponent positioned at bottom.It is certainly caused by the fact that the
md-toastcomponent is first created at position documents' height + its own height and then it goes up a position documents' height.On the other hand, this event doesn't appear when the toast is positioned top even if it's animation shows him appearing from a higher position.
Thank you,
Izcalli
The text was updated successfully, but these errors were encountered: