CODEWITHSUNDEEP
cssvuetify.js
svenema
svenema

Reputation: 2506

How to set a child v-card of an absolute v-overlay to 100% height and width?

I have a v-dialog, which has a help icon, which when clicked puts a v-overlay over the v-dialog (parent v-card) box to provide help text. In order to position the overlay over only the v-dialog and not the whole application, I set the absolute property.

<v-dialog v-model="dialog" max-width="500px">
    <v-card>
        <v-overlay absolute :value="olyHelp" opacity="1">
            <v-card @click="olyHelp=false" width="100%" height="100%">
                <p>XXXX</p>
            </v-card>
        </v-overlay>

        <v-card-title class="d-flex justify-space-between">
            <v-btn class="align-baseline" icon small @click="olyHelp=true"><v-icon small>mdi-help</v-icon></v-btn>
        </v-card-title>

        <v-card-text>
           Regular dialog stuff
        </v-card-text>
   </v-card>
</v-dialog>

The v-card within the overlay is centered within the overlay and the width and height are ignored. I've tried to set all different css position's on it, but I can't seem to get it to fill up the whole overlay / dialog (parent v-card) space.

Example:

enter image description here

I need to have the v-card fill up the full width and height of the parent v-card/v-overlay

Upvotes: 5

Views: 3180

Answers (1)

Adam Ullman
Adam Ullman

Reputation: 1537

I ran into this same issue and ended up fixing it by modifying the css.

<template>
  <v-overlay class="my-overlay">
    <v-card width="100%" height="100%">
      My content
    </v-card>
  </v-overlay>
</template>
<style scoped>
  .my-overlay >>> .v-overlay__content {
    width: 100%;
    height: 100%;
  }
</style>

Upvotes: 5

Related Questions