CODEWITHSUNDEEP
javascriptvue.js
Bill
Bill

Reputation: 1477

Wait v-dialog with a v-card needs a transparent background for Vue.js

I have the following Vue code:

   <v-dialog v-model="overlay" persistent width="100px">
      <v-card>
        <v-card-text>
          <v-overlay>
            <v-progress-circular indeterminate size="64"></v-progress-circular>
          </v-overlay>
        </v-card-text>
        <v-card-actions>
          <v-btn x-small color="primary" flat @click="overlay =false">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

and it is displayed in the center of the screen but has a white background in the v-card. I really don't care if the v-card is used or not but I would like to have a wait circle with a cancel show up as an overlay with a totally transparent background.

I've tried 

  <v-dialog v-model="overlay" persistent width="100px">


 <v-card color="transparent">
    <v-card-text color="rgb(255, 255, 255, 0.2)">
   <!--  <v-card-text color="rgb(0, 0, 0, 0.2)"> -->
      <v-overlay>
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
    </v-card-text>
    <v-card-actions>
      <v-btn x-small color="primary" flat @click="overlay =false">Cancel</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

But I still get a solid white background.

Your help is appreciated.

Upvotes: 0

Views: 3699

Answers (1)

Vinicius Santin
Vinicius Santin

Reputation: 620

If you want to have a full-screen overlay, leave the overlay in the root of your template. Then add the content with the v-card and v-btn to cancel the loading inside the v-overlay

I built one example: https://codepen.io/vsantin/pen/ZEEPBOx 

 <v-overlay :value="overlay" color="white">
    <v-card width="250">
      <v-card-text class="text-center">
        <v-progress-circular size="20" class="mr-1" indeterminate></v-progress-circular> 
        <span>Loading...</span>
      </v-card-text>
      <v-card-actions>
        <v-btn small color="primary" flat @click="overlay = false">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-overlay>

If you want to have the just the spin in the overlay, remove the v-card.

Upvotes: 2

Related Questions