Not showing unless hovering #605

hellseyfer · 2019-01-01T17:18:35Z

It was working well but after some issues and updates of angular dependencies it won't show normally unless i hover it. Already tried without animation without success

higgs01 · 2019-01-01T19:28:36Z

i'm having the same issue

trevor-hackett · 2019-01-01T19:39:08Z

By the way you've described what is happening, it sounds like it's not working properly unless you trigger change detection on the toast.

Are you triggering the toast outside of change detection or outside of angular's zone?

higgs01 · 2019-01-01T19:42:35Z

@yarrgh not that i know of, i've just followed the guide in https://github.com/scttcper/ngx-toastr#setup and https://github.com/scttcper/ngx-toastr#use

Here is my code:

Styles:

/* You can add global styles to this file, and also import other style files */
@import '~ngx-toastr/toastr.css';
body {
  margin: 0;
}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    FormComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AngularEditorModule,
    RecaptchaModule,
    RecaptchaFormsModule,
    ReactiveFormsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

form.component.ts

constructor(private _types: PlugintypeService, private _toastr: ToastrService) { }

  ngOnInit() {
    this._types.getPluginTypes().subscribe(types => {
      this.types = types;
    });
  }

  public onSubmit(): void {
    if (this.createForm.status === 'INVALID') {
      console.warn('Form invalid');
      this._toastr.error('Formular nicht vollständig', 'fehler');
    } else {
      console.warn(this.createForm.value);
    }
  }

trevor-hackett · 2019-01-01T20:07:14Z

Yes, I can confirm that this is happening. Not sure exactly why though.

Funny thing is, if you turn on the progress bar it works fine.

Example:

  click() {
    this.toastr.success('testing', 'Test', { progressBar: true });
  }

The contents of the toast are not being added...

...until something triggers change detection to run, which then causes the contents to appear.

nikhilpatel7 · 2019-01-02T06:10:13Z

I was facing the same issue. But after digging for hours I was able to find the solution...
There's a naming collision for the .toastr CSS class in bootstrap and ngx-toastr.
You can find out the solution on : https://stackblitz.com/edit/angular-avcidu
Source of solution:
https://stackoverflow.com/questions/53989445/ngx-toastr-toast-not-showing-in-angular-7#

Thanks

higgs01 · 2019-01-02T07:19:45Z

@nikhilpatel7 thank you very much. This solved it for me

scttcper · 2019-01-02T07:59:16Z

duplicate of #602 probably

trevor-hackett · 2019-01-02T13:48:56Z

I don't think this is specific to bootstrap. I performed my tests with a new angular-cli project without bootstrap and was able to get this strange behavior to happen. The behavior I saw is due to angular not populating the toast with the contents until change detection is ran (mouse over)

trevor-hackett · 2019-01-02T17:47:36Z

Here a repo with the issue: https://github.com/yarrgh/test-toast-app

I can't duplicate it on StackBlitz. If you run ng serve or run ng build --prod and then serve the dist files, you should be able to see what I'm seeing.

trevor-hackett · 2019-01-02T18:04:11Z

I think the issue I found may be separate from the OP but I'm not entirely sure until they respond.

scttcper · 2019-01-02T18:19:06Z

@yarrgh you don't have animations loaded?

trevor-hackett · 2019-01-02T19:22:15Z

Touché.

That's what I get by going too fast. I stopped once I "duplicated" the issue.

hellseyfer · 2019-01-02T21:51:24Z

My issue could be related to angular material or angular updates, it was working fine with bootstap. Just wanted to know if it was only me, thanks

ngKisor · 2019-01-03T03:38:43Z

add this to your global style.css
#toast-container > div {
opacity:1;
}

ianbeemsterboerr · 2019-01-04T20:17:45Z

I am having the same issue, and I can confirm that the problem is a collision with bootstrap, cause when I commented out the bootstrap reference in my styles attribute on angular.json the toasts showed up fine. However, even when I added:

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

to my global styles css (which I assume is app.component.css in an angular project) the issue kept on persisting.

Hernior · 2019-01-08T22:01:00Z

I am having the same issue, and I can confirm that the problem is a collision with bootstrap, cause when I commented out the bootstrap reference in my styles attribute on angular.json the toasts showed up fine. However, even when I added:

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

to my global styles css (which I assume is app.component.css in an angular project) the issue kept on persisting.

I had to do a few more things for this to work on my Angular + Bootstrap project, my styles.css looked like this:

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}

I hope this workaround help some of you guys.

segux · 2019-01-22T10:28:47Z

Im having the same issue but just only with first toastr.

And looks like is an error of javascript, not css

[SOLVED]
My error was not importing BrowserAnimationsModule correctly.

pnutmath · 2019-01-28T11:00:02Z

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

ianbeemsterboerr · 2019-01-28T19:44:20Z

After combining what @abhaygawade and @Hernior advised it works for me.

nicolas-b12 · 2019-01-31T16:38:29Z

Found this in toastr.css :

.toast-container .toast:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}

Is it normal ?

naveenkengannar · 2019-02-03T11:47:50Z

I am facing the same issue while using the latest Bootstrap 4.2.1. I tried all the workarounds given above but none of them fixed the issue. Anyone has tried the version of Bootstrap 4.2.1 and fixed the issue by any chance?

guibleme · 2019-02-13T15:50:37Z

After combining what @abhaygawade and @Hernior advised it works for me.

I reproduced again the Module thing, with the corrective css on my styles.css and I can say that it works.
So, literally go to app.module and rearrange the app imports.

import { CommonModule } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

pnutmath · 2019-02-18T09:15:13Z

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

No need to override the ngx-toastr styling. If animation module properly set. This will manage opacity thing

sandrumirceaioan · 2019-02-19T14:07:20Z

No need to override the ngx-toastr styling. If animation module properly set. This will manage opacity thing

My modules are in the exact same order as you guys described, but nothing except css trick works...

tomjvdberg · 2019-02-27T09:07:58Z

I can confirm that the issue is introduced when I upgrade bootstrap to 4.3.1. Reverting to my previous version of 4.1.3 solves the issue.

Problem is that bootstrap uses the same class .toast with "opacity: 0;". Solution is to have this set in the toastr.css ".toast-container .toast " as "opacity: 1;" since it will overwrite the bootstrap style.

Created a pull request #623

stramunin · 2019-03-01T00:07:35Z

Another solution: don't import toast, if you don't use it in your project.
Remove @import "toasts" from your scss file.

My style.scss with latest bootstrap, excluding some files:

// import bootstrap 4
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";

// import ngx-toastr styles
@import '~ngx-toastr/toastr-bs4-alert';

// code...

See: https://getbootstrap.com/docs/4.3/getting-started/theming/#importing
Source code: https://github.com/twbs/bootstrap/blob/master/scss/bootstrap.scss

marchage · 2019-03-04T13:15:35Z

Yeah, but for my setup that is not a solution. I am not importing 22+ bootstrap scss files but a simple cdn version. What would work in that is case is to append the fix from Tom's pull request ( #623 ) to your main src/styles.scss file. If you have one of course. And if it doesn't interfere with other "stuff" in your project.

.toast-container .toast {
  opacity: 1;
}

[EDIT] Oh sorry, didn't see @Hernior 's comment from january 8th

deckerbd · 2019-03-05T21:25:43Z

Just ran into this as well after updating to the latest version of Bootstrap. The snippet by @Hernior worked for me. Are there any plans to fix this?

scttcper · 2019-03-05T22:20:00Z

@deckerbd looking to make a bunch of breaking changes around the ivy release and make this fix a part of that. It requires breaking changes. The opacity: 1 isn't a good fix and ideally people wouldn't import toast styles they aren't using.

If you're using bootstrap with scss you should not import the toast styles see #602

trevor-hackett · 2019-03-12T18:39:28Z

Can somebody try 9.2.0 and see if this works without needing to add the additional css? From my initial quick tests on an empty project using Bootstrap 4.3.1 and ngx-toastr 9.2.0 toasts are showing up without having to add the opacity css in my project.

Edit
It's not fixed if you're using the ToastNoAnimation component instead of the default component. If you're not using a custom component (using the default component), it should be fixed in this version. Let us know if you're still seeing the same issues with 9.2.0.

scttcper · 2019-03-14T06:18:10Z

🎉 This issue has been resolved in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Hernior · 2019-03-14T16:41:42Z

🎉 This issue has been resolved in version 10.0.0 🎉

The release is available on:

npm package (@latest dist-tag)

GitHub release

Your semantic-release bot 📦🚀

Thank you Scott <3

andrebrz · 2019-06-26T02:20:04Z

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

Perfect! Thank you!

prasanga-b · 2019-12-13T07:39:04Z

you need to import BrowserAnimationsModule in app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and also add that in the @NgModule imports array

SamiHK · 2020-06-07T08:15:28Z

@pnutmath your answer solved the issue for me. Thank you soo much!

amiram · 2020-08-20T10:54:33Z

I'm using ng9 with toastr 12.1.0. Trying to show a toast from a service listening to firebase messaging. Nothing here helped other than progressBar: true. Even if I showing the toast in the component that holds the service and call detectChanges(), still not working unless hovering.

camposfyi · 2020-08-21T16:15:42Z

Im having the same issue but just only with first toastr.

And looks like is an error of javascript, not css

[SOLVED]
My error was not importing BrowserAnimationsModule correctly.

Thanks. This solved it for me.

kapil26021994 · 2023-09-04T13:47:46Z

hi @nicolas-b12 Hi sir can you tell me how to add CSS dynamically on progress bar?

trevor-hackett added type: bug need: investigation labels Jan 1, 2019

trevor-hackett mentioned this issue Mar 12, 2019

feat: move toast css display outside of animation #631

Merged

scttcper mentioned this issue Mar 13, 2019

feat: rename default toastClass from .toast to .ngx-toastr #632

Merged

scttcper closed this as completed in #632 Mar 14, 2019

scttcper added the released label Mar 14, 2019

Not showing unless hovering #605

Not showing unless hovering #605

Comments

hellseyfer commented Jan 1, 2019

higgs01 commented Jan 1, 2019

trevor-hackett commented Jan 1, 2019

higgs01 commented Jan 1, 2019

trevor-hackett commented Jan 1, 2019 • edited Loading

nikhilpatel7 commented Jan 2, 2019 • edited Loading

higgs01 commented Jan 2, 2019

scttcper commented Jan 2, 2019

trevor-hackett commented Jan 2, 2019 • edited Loading

trevor-hackett commented Jan 2, 2019

trevor-hackett commented Jan 2, 2019

scttcper commented Jan 2, 2019

trevor-hackett commented Jan 2, 2019

hellseyfer commented Jan 2, 2019

ngKisor commented Jan 3, 2019

ianbeemsterboerr commented Jan 4, 2019

Hernior commented Jan 8, 2019 • edited Loading

segux commented Jan 22, 2019 • edited Loading

pnutmath commented Jan 28, 2019 • edited Loading

ianbeemsterboerr commented Jan 28, 2019

nicolas-b12 commented Jan 31, 2019

naveenkengannar commented Feb 3, 2019

guibleme commented Feb 13, 2019 • edited Loading

pnutmath commented Feb 18, 2019

sandrumirceaioan commented Feb 19, 2019

tomjvdberg commented Feb 27, 2019

stramunin commented Mar 1, 2019 • edited Loading

marchage commented Mar 4, 2019 • edited Loading

deckerbd commented Mar 5, 2019

scttcper commented Mar 5, 2019

trevor-hackett commented Mar 12, 2019 • edited Loading

scttcper commented Mar 14, 2019

Hernior commented Mar 14, 2019

andrebrz commented Jun 26, 2019

prasanga-b commented Dec 13, 2019 • edited Loading

SamiHK commented Jun 7, 2020

amiram commented Aug 20, 2020

camposfyi commented Aug 21, 2020

kapil26021994 commented Sep 4, 2023

trevor-hackett commented Jan 1, 2019 •

edited

Loading

nikhilpatel7 commented Jan 2, 2019 •

edited

Loading

trevor-hackett commented Jan 2, 2019 •

edited

Loading

Hernior commented Jan 8, 2019 •

edited

Loading

segux commented Jan 22, 2019 •

edited

Loading

pnutmath commented Jan 28, 2019 •

edited

Loading

guibleme commented Feb 13, 2019 •

edited

Loading

stramunin commented Mar 1, 2019 •

edited

Loading

marchage commented Mar 4, 2019 •

edited

Loading

trevor-hackett commented Mar 12, 2019 •

edited

Loading

prasanga-b commented Dec 13, 2019 •

edited

Loading