Topic: Toast notification flickr once before it disappear.

peter.r.bladh@saabgroup.com free asked 3 years ago


Hi,

If I modify the opacity for the toast notification it will sometimes flickr once before it disappears. (So, you have to repeat the notification a couple of times before it happens.).

Maybe the problem is related to Chrome.

For changing the opacity i have followed the guide https://mdbootstrap.com/docs/angular/advanced/notifications/#opacity

Best Regards, Peter



Many thanks Damian, it seems to work now :)


Damian Gemza staff answered 3 years ago


Dear Peter,

I have found the root of your problem.

Please overwrite your styles with the below styles, and there should be no more than the strange blinking effect in the toast:

.toast-module-opacity {
  opacity: 1 !important;
}

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

Best Regards,

Damian



The problem exists in our development environment where we use Windows 7 and Chrome "version 72.0.3626.119 (Officiell version) (64 bitar)".

The problem seems to not appear in our test environment where we use Windows 10 and Microsoft Edge 40.15063.674.0.


Damian Gemza staff answered 3 years ago


Peter, I'll investigate this, but yesterday I wasn't able to reproduce this problem on Chrome and Firefox.

On which version of Chrome this problem exists? Does it exist on Firefox or another browser? How with some another OS like Linux, MacOS or some other Windows?



Good Morning,

Here comes a short movie showing the problem.

Best Regards,

Peter


Damian Gemza staff answered 3 years ago


I have tried to reproduce it but without success.

Could you please send me a movie, where this problem is visible? Without it, I'm not able to help you well.

Best Regards,

Damian



Hi Damian,

Here is our Notification Service...

notification.service.ts

import { Injectable } from '@angular/core';
import { ToastService, IndividualConfig, GlobalConfig } from 'ng-uikit-pro-standard';

@Injectable({
  providedIn: 'root'
})

export class NotificationService {

  private individualConfig: IndividualConfig;

  constructor(private toastrService: ToastService) {
    this.individualConfig  = new GlobalConfig();
    this.individualConfig.positionClass = "md-toast-bottom-left";
    this.individualConfig.toastClass = "toast-module-opacity";
  }

  success(message: string, title?: string | any): any {
    return this.toastrService.success(message, title, this.individualConfig);
  }

  error(message: string, title?: string | any): any {
    return this.toastrService.error(message, title, this.individualConfig);
  }

  info(message: string, title?: string | any): any {
    return this.toastrService.info(message, title, this.individualConfig);
  }

  warning(message: string, title?: string | any): any {
    return this.toastrService.warning(message, title, this.individualConfig);
  }

}

and styles.sccs

.toast-module-opacity {
    opacity: 1.0 !important;
}

which I simply call like this.

this.notificationService.success("Document successfully added!");

If we trigger this notification a couple of times the message will flickr once before it disappears (in Chrome).

Best Regards,

Peter


Damian Gemza staff answered 3 years ago


Dear Peter,

How can I reproduce this problem? Could you please provide me with some reproduction steps?

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

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

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes