CODEWITHSUNDEEP
cssvue.jsvuetify.js
UmbrellaCorpAgent
UmbrellaCorpAgent

Reputation: 615

Overriding the overflow property of a vuetify dialog

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?

Upvotes: 2

Views: 4090

Answers (2)

aishize
aishize

Reputation: 9

just use content-class prop

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

Upvotes: 0

UmbrellaCorpAgent
UmbrellaCorpAgent

Reputation: 615

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.

Upvotes: 6

Related Questions