CODEWITHSUNDEEP
toastr
RobVious
RobVious

Reputation: 12915

Setting toastr opacity?

Is there any way to change it? I tried defining the toastClass as a class with opacity set to 1, but saw no changes: 

.toast-style{
   opacity: 1;
}

toastr.options.toastClass = 'toast-style';

Upvotes: 43

Views: 28777

Answers (7)

Hassaan Raza Now
Hassaan Raza Now

Reputation: 173

i am using bootstrap 4.6, setting opacity did not help. but setting background-color: white for the toast-body did the job.

you on also use bg-light etc. on toast-body

hopes this help somebody!

Upvotes: 0

ankit
ankit

Reputation: 2845

If u are not able to see toast notification after setting opacity ten you have to check CSS configuration in angular.json file of your project. Just like:

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

Upvotes: 0

Sai Sreenivas
Sai Sreenivas

Reputation: 21

Copying all the CSS from "~ngx-toastr/toastr.css" into the application's styles.css file worked for me.

Upvotes: 0

Farhad Hessari
Farhad Hessari

Reputation: 55

For those who want to decrease opacity, they can do something like this:

.toast-error { background-color: rgba(255,111,105,0.7) !important; }

Upvotes: 1

Angelina
Angelina

Reputation: 141

#toast-container > div {
   opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
}

Test Working Example;

Upvotes: 6

Madbreaks
Madbreaks

Reputation: 19529

I needed to do this for a single toastr so went this route:

toastr.options = {
    ... 
};

toastr.info(
    'All of my favorite singers have stolen all of my best lines',
    'The Title'
);

$('#toast-container').addClass('nopacity');

...and then...

#toast-container.nopacity > div {
    opacity: 1;
}

Upvotes: 1

John Papa
John Papa

Reputation: 22298

No JavaScript required for this. You should be able to change this in CSS using either 

#toast-container > div {
    opacity:1;
}

or 

.toast {
    opacity: 1 !important;
}

Upvotes: 77

Related Questions