CODEWITHSUNDEEP
vue.jsvuetify.js
A. Mehlen
A. Mehlen

Reputation: 135

Vuetify v-dialog set size to v-img size

I want to center an image (passed as props) in a dialog and the size of the dialog should be the same as the image. Maybe with some offset because of the toolbar with the x to close the dialog.

Does someone know how to remove the scrolling and set the correct size for the dialog?

Code

<template>
  <v-dialog
    v-model="showDialog"
    :height="picture.PicHeight"
    :width="picture.PicWidth"
  >
    <v-card>
      <v-toolbar dense color="elevation-0">
        <v-spacer></v-spacer>
        <v-btn icon color="black" @click.native="closePictureDialog">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
      <v-row no-gutters>
        <v-col cols="12">
          <v-row align="center" justify="center">
            <v-img
              :src="picture.Pic"
              :height="picture.PicHeight"
              :width="picture.PicWidth"
              contain
            ></v-img>
          </v-row>
        </v-col>
      </v-row>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  name: "PictureDialog",
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    picture: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      //
    };
  },
  methods: {
    closePictureDialog() {
      this.$emit("onClosePictureDialog");
    }
  }
};
</script>

Best regards, A.Mehlen

Upvotes: 1

Views: 2185

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362760

The scrolling is happening because you need no-gutters on the inner <v-row>...

  <v-dialog
    v-model="showDialog"
    :height="picture.PicHeight"
    :width="picture.PicWidth">
    <v-card>
      <v-toolbar dense color="elevation-0">
        <v-spacer></v-spacer>
        <v-btn icon color="black" @click.native="closePictureDialog">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
      <v-row no-gutters>
        <v-col cols="12">
          <v-row no-gutters align="center" justify="center">
            <v-img
              :src="picture.Pic"
              :height="picture.PicHeight"
              :width="picture.PicWidth"
              contain
            ></v-img>
          </v-row>
        </v-col>
      </v-row>
    </v-card>
  </v-dialog>

https://codeply.com/p/hFIuHqYRFk

Upvotes: 2

Related Questions