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

Question

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:

How can I solve this?

Answer 1

Add this in style.css

.toast {
    margin-top: 45px !important;
}

Answer 2

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;
}