Search code examples
htmlcssangulartypescriptngx-toastr

Toaster (ngx-toastr) top-center alignment doesn't have top margin

I'm using the ngx-toastr library. I'm launching a message positioned at the top-center of the screen like this:

@Injectable()
export class MessageService {

    constructor(private toastrService: ToastrService) { }

    showErrorMessage(message: string) {
         this.toastrService.error(message, undefined, {
              positionClass: 'toast-top-center'
         });
    }
}

The problem is that the toast is being shown without any margin on the top:

enter image description here

How can I solve this?

Solution

  • Even if I think that this is a design problem, I found out in here and workaround. You just need to put the following in your main .css or.scss:

    .toast-top-center {
    top: 30px;
}