Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Toast stuck in transparent state

dxl pro asked 6 years ago


When I show a toast, it's stuck in a transparent estate with 0.5 opacity. It never transitions to full opacity, making the contents unreadable.

 

johnpmcg83 free answered 5 years ago


Hi Damian,

Sorry, I cant provide a screenshot to show a flicker as it is an animation.

To reproduce simply create a blank project with mdbpro v 7.5.2 an include the following as AppComponent

export class AppComponent {
 title = 'ng-uikit-pro-standard-compile-app';

 constructor(private toastrService: ToastService) {}
 showSuccess() {
    const options = { closeButton: true, toastClass: 'opacity' };
   this.toastrService.success('Info message', 'Success!', options);
 }
 }

And then the following in styles.scss:

.opacity {
 opacity: 1 !important;
}
#toast-container > mdb-toast-component.opacity,
#toast-container > mdb-toast-component.opacity > div {
opacity: 1 !important;
}

The flickering most commonly happens on the first call to the .success method on both the toast message fading in, and fading out.


Arkadiusz Idzikowski staff commented 5 years ago

Hello,

We are already aware of that problem and it should be fixed in next version.

Which browser/version do you use?


Damian Gemza staff answered 5 years ago


Dear @johnpmcg83

Could you please provide me with the reproduction steps? I would like to debug your problem.

Also, please provide me with screenshots of actual behavior.

Without these informations, I won't be able to help you well.

Best Regards,

Damian


johnpmcg83 free answered 5 years ago


Hi,I have found that changing the opacity as in the docs results in a flickering effect in the toast.How can I make the toast behave exactly as it does in the link you provided above?Thanks,John


Arkadiusz Idzikowski staff answered 6 years ago


You can find information on how to change toast opacity in our documentation:

https://mdbootstrap.com/docs/angular/advanced/notifications/



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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No