Toast stuck in transparent state


Topic: Toast stuck in transparent state

dxl pro asked 4 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.

 

Arkadiusz Idzikowski staff answered 4 years ago

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

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


johnpmcg83 answered 3 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


Damian Gemza staff answered 3 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 answered 3 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 3 years ago

Hello,

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

Which browser/version do you use?


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
  • User: 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