Allow setting position offset in options

Right off the bat, I just wanna say, beautiful library =c)

I’d love to be able to overwrite the position offset.

Detailed Description

Right now we can set the position based on position names (top-right, top-center, etc). This is great for most use cases. I think it’d be helpful to be able to also set the position using an offset based on whatever units are appropriate. This is potentially made more difficult since the positioning seems to be responsive based on a 600px breakpoint, but there could be 2 options (position_offset, position_offset_sm).

Context

I have a floating header in my app, and I’d like to have the toast show up top_center, but below the header. The header height can change dynamically, but since the options of toasts can be changed dynamically, I can watch for that and adjust.

I would think there could be other folks that have elements they don’t want to be covered by the toasts.

Possible Implementation

The options could possibly look like this: {position:{position:"top-center", "top":"150px"}} {position:{position:"bottom-right", "bottom":"3em", "right":"1em"}}

The code would then set the margin of the container to add additional offset(s). It should probably also be able to take these in as global defaults, similarly to how you can configure defaults by error type.

Of course a work around can be overwriting the css files, but that’s not a great experience, and would be difficult to do dynamically.

Thanks again for a great library.

[Maronato]

My reason for not implementing this right now is that I wanted to avoid making style modifications directly through JS as they are harder to track down and debug by the end-user. I also fear that if I implement this feature it’ll serve as a pretext for other people’s dynamic styling requests, to which I’ll have a hard time saying no.

I’ll, however, leave it open for a while as a discussion and if more people show interest I’ll reconsider implementing it.

[Pyro979]

For posterity, here is how I solved it for now (again @Maronato if you decide to add it as a feature let me know 😄 )

In the function that knows the header height was updated:

//get header DOM element
let header = document.getElementById("header_hidden_false");
 //Get header height. Feel free to set your own min-height.
let headerHeight = header == null ? 135 : header.offsetHeight;
//this sets a a css variable into :root context
document.documentElement.style.setProperty("--toast-top-offset",toastTopOffset + "px");

In my App.vue I added this style. In my case it was global, but you can do it based on custom classes as described by @Maronato above.

.Vue-Toastification__container.top-center {
  margin-top: var(--toast-top-offset);
}

References: https://www.telerik.com/blogs/passing-variables-to-css-on-a-vue-component https://css-tricks.com/updating-a-css-variable-with-javascript/ https://plainjs.com/javascript/styles/getting-width-and-height-of-an-element-23/