Topic: mdb toast overriding default opacity

I followed the instructions in the documentation, which talks about overriding the default toast opacity. But, the toast opacity did not change and the message is too hard to read. When I hover over it, the opacity increases. How do I change the initial opacity?

I tried the following code but it didn't work.

css:

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

 const options = { positionClass: 'md-toast-top-left',toastClass: 'opacity' };
      this.toastSvc.error('blah',options);

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Please make sure that you added the scss rules to the global styles.scss file and try to add third argument (empty string for example) to the error method:

this.toastSvc.error('blah', '', options);

getitdonefitness commented 6 years ago

I added the properties below to the global styles.css and it worked. thx

.opacity { opacity: 1 !important;}

toast-container > mdb-toast-component.opacity,

toast-container > mdb-toast-component.opacity > div {

opacity: 1 !important;}

Add comment

Write

Create snippet

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.4
Device: mac
Browser: chrome
OS: mac
Provided sample code: No
Provided link: No

getitdonefitness

25Support score
3Questions 1Answers

0Snippets likes 0Snippets