Overriding the overflow property of a vuetify dialog

user_9870293 0
Viewed 1445

Simple question : I want a floating action button to be on the top right of a dialog, overflowing so it's a little offset from the dialog. The v-dialog has 'overflow-y: hidden', and no matter how I try, I can't override this.

<v-dialog max-width="450">
  <div style="width: 200px; heigth: 200px;" >
    <v-btn fab absolute top right>
      <v-icon>
        mdi-close
      </v-icon>
    </v-btn>
  </div>
</v-dialog>

I tried to use some styles with !important :

.show-overflow {
  overflow: visible !important;
}

I tried to style directly using 'style="overflow: visible"' in the

If I turn off the overflow: hidden from the v-dialog using chrome's devtool I get the exact result I want, yet I didn't fin any way.

Anybody has the solution?

vuetify.js vue.js css
2 Answers

OK so I found the way to do this. Basically, using the Vue's deep CSS selector was the correct way to do this.

Only had to do this in the style of my component :

<style scoped>
  >>> .v-dialog {
    overflow-y: visible;
  }
</style>

The '>>>' was the key as it 'deeply' overrides the style of the .v-dialog class. Using this within a scoped style makes it so it won't break the v-dialog elsewhere.

user_98702930

just use content-class prop

<v-dialog
  ...
  :content-class="check && 'overflow-visible'"
  ...
>...</v-dialog>
user_140473640
Related