[Vuejs]-How to get a "close" icon floating on the top right corner of a v-dialog

by

1👍

✅

I think you have to either allow overflow on the v-card, or put the button in a container around the card.

<v-card class="overflow-visible">
  <v-btn
    class="close-popup"
    icon="mdi-close-thick"
    color="black"
    size="x-small"
    elevation="0"
  />
  ...

or

<div class="position-relative">
  <v-btn
    ...
  />
  <v-card>...</v-card>
</div>

Then you can use absolute positioning to get it to the right and then translate it to the corner:

  .close-popup {
    position: absolute !important;
    right: 0;
    transform: translate(50%, -50%);
    border: 3px solid white !important;
  }
  .close-popup .mdi {
    font-size: 24px;
  }

Have a look at the playground

👤Moritz Ringler

Leave a comment