Toast custom position using Blazored Toast

Question

Is there an option to set a custom toast position using Blazored Toast library? I can only see predefined options like TopLeft, TopRight, but I need more control over the position of the toast. Is it possible?

Answer 1

Blazor uses Html and CSS. If you open the browser dev tools, you can inspect the toast, identify the positioning CSS, then you can modify it in your own CSS. Just make sure that you use specificity to override the default. you might need to use !important to force it, but I would only do it if there was no other option.

Answer 2

Just add this section in yours app.css

.position-topleft, .position-topright, .position-topcenter {
    top: 40px!important;
}