search

shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

How to change the position of the toast? #187

Open t0mos opened 3 years ago

t0mos commented 3 years ago

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 commented 3 years ago

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