Topic: Toast Message not displayed in Edge after updating @angular/animations.
peter.r.bladh@saabgroup.com free asked 5 years ago
Hi,
Our Toast Messages is no longer displayed in Edge after updating @angular/animations from version 7.2.6 to 7.2.12.
In the Edge Debugger I can see that an extra Class (ng-animating) and a new Style information is added to the mdb-toast-component. The new Style information is "animation:gen_css_kf_4 300ms linear forwards; display: none;".
using @angular/animations 7.2.6.
<div class="overlay-container">
<div class="md-toast-top-right" id="toast-container">
<mdb-toast-component class="md-toast-success toast-module-opacity ng-trigger ng-trigger-flyInOut" style="opacity: 0.5;">
<!---->
<!---->
<!---->
<!---->
<div class="md-toast-message ng-star-inserted" aria-label="The table for 'Document Type' was uccessfully saved!"> The table for 'Document Type' was uccessfully saved!
</div>
<!---->
<!---->
</mdb-toast-component>
</div>
using @angular/animations 7.2.12.
<div class="overlay-container">
<div class="md-toast-top-right" id="toast-container">
<mdb-toast-component class="md-toast-success toast-module-opacity ng-trigger ng-trigger-flyInOut ng-animating" style="animation:gen_css_kf_4 300ms linear forwards; display: none;">
<!---->
<!---->
<!---->
<!---->
<div class="md-toast-message ng-star-inserted" aria-label="The table for 'Document Type' was uccessfully saved!"> The table for 'Document Type' was uccessfully saved!
</div>
<!---->
<!---->
</mdb-toast-component>
</div>
Best Regards, Peter
peter.r.bladh@saabgroup.com free answered 5 years ago
Thanks Damian,
The Toast Message is now displayed in Edge :)
But, with this workaround the Toast Message flicker/blink once before it is displayed (in Edge).
Best Regards, Peter
Arkadiusz Idzikowski staff commented 5 years ago
We will take a closer look at this issue and try to fix it as soon as possible.
Damian Gemza staff answered 5 years ago
Dear Peter,
Thanks for your report. We have to investigate it deeper.
But for now, please add the below styles to the styles.scss
main stylesheet as a workaround for not visible toasts:
mdb-toast-component {
display: block !important;
}
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: PC
- Browser: Edge
- OS: Windows
- Provided sample code: No
- Provided link: No