[Vuejs]-Vuetify v-dialog not covering fully the parent page when showed

by

0👍

✅

The problem is that you put v-tabs directly into the v-dialog component. The v-tabs component changes its height based on the content thats inside it.
I suggest you wrap your tabs in a v-card and v-card-text component. With the fullscreen prop on the dialog the card will take the full height and obscure anything behind it. With your sample code it would look like this:

<div style="background-color: white;">
  <v-dialog
    scrollable
    fullscreen
    v-model="show"
    style="background-color: white; width: 800px;"
    persistent
  >
    <v-card>
      <v-card-text>
        <v-tabs fixed-tabs>
          <v-tab>Único</v-tab>
          <v-tab>Vários</v-tab>
          <v-tab-item>
          </v-tab-item>
          <v-tab-item>
            <v-layout style="height: 100%; background: white;">
              <div style="height: 100%; background: green;">
                <h1 style="width: 20px;">asdsa</h1>
                <h1>asd</h1>
              </div>
            </v-layout>
          </v-tab-item>
        </v-tabs>
      </v-card-text>
    </v-card>
  </v-dialog>
</div>

Leave a comment