CODEWITHSUNDEEP
htmlcssangulartypescriptngx-toastr
Ricardo Rocha
Ricardo Rocha

Reputation: 16266

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?

Upvotes: 1

Views: 7892

Answers (2)

Ricardo Rocha
Ricardo Rocha

Reputation: 16266

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

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22203

Add this in style.css

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

Upvotes: 3

Related Questions