How to change the position of the toast?

[t0mos]

I want to make it closer to the top right corner. By default the positioning is

`  &.top-right {
    top: 10%;
    right: 7%;
  }`

I want to make it

  &.top-right {
    top: 2%;
    right: 2%;
  }

but I am struggling with overwriting the code.

[Mayo89]

I had the same issue, I was trying to use scoped styles in a component but I believe as the toast is not part of the component these are not applied.

You can set the containerClass on your toast and then style in some global css file.

this.$toasted.show(x.response.data, {
    containerClass: "toastContainer",
});

.toasted-container.toastContainer.top-right {
	top: 0%;
	right: 1%;
}