Toast keeps scrolling with page

[msandwidi]

Hello everyone. Thank you all for keeping this package running. I am using ngx-toastr in one of my projects and it works great except that I have configured it to show at the bottom right corner. It does show at the bottom right corner for short pages. And for long pages, The toast either scrolls with the page or appear at a location that is not on the screen. I would like it to show at the same position on any screen.

my configuration does not have anything fancy.

Here is the module declaration. This is exported from a shared module into app.module

 @NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    ToastrModule.forRoot({
      positionClass: 'toast-bottom-right'
    }),
    BsDatepickerModule.forRoot(),
    TabsModule.forRoot(),
    PaginationModule.forRoot(),
    AlertModule.forRoot()
  ],
  exports: [
    BsDropdownModule,
    ToastrModule,
    BsDatepickerModule,
    TabsModule,
    PaginationModule,
    AlertModule
  ]
})

Here is one of the components. In this component, the toast just shows at the top off-screen and scrolls with the page.

@Component({
  selector: 'app-product-details-vendors',
  templateUrl: './product-details-vendors.component.html',
  styleUrls: ['./product-details-vendors.component.css']
})
export class ProductDetailsVendorsComponent implements OnInit {
  @Input()
  product: ProductDetails

  constructor (
    private productService: ProductsService,
    private toastr: ToastrService,
  ) {}

  ngOnInit (): void {}

  /**
   * remove vendor from product
   * @param vendorId
   */
  removeVendor (vendorId) {
    return this.productService
      .removeProductVendor(this.product.id, vendorId)
      .subscribe({
        next: () => {
          this.toastr.success('Vendor removed')
        },
        error: err => console.log(err)
      })
  }
}

Here is an example it that can help

Environment:
angular@12
ngx-toastr@14.3.0

Thank you in advance

[fbanyai]

Hello @msandwidi ,

I had a very similar setup and exactly the same issue as you. Just solved it by adding the following style after the Toastr CSS file call:

@import "ngx-toastr/toastr";

.toast-container {
  position: fixed;

  .ngx-toastr {
    margin-top: 6px;
  }
}

I'm not sure if it is the most appropriate solution for this bug but it's working for me. :)

[sagar-bakraniya]

Thanks @fbanyai it works for me but i had to add !important in position fixed
Thanks you saved my lots of time.