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



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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: PC
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags