Topic: Toast stuck in transparent state
dxl pro asked 5 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 5 years ago
You can find information on how to change toast opacity in our documentation:
https://mdbootstrap.com/docs/angular/advanced/notifications/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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