Question 247920 in CSS Question posted in
Some basic documentation can be found here.

Css – Unable to align a container to the end of a v-img

I’m using Vue and vuetify and I want to align a row to the end of the container, which is located in an image.

This is what it looks like right now.

enter image description here

I already tried to set the "align-end" to the v-img and it worked, but I want to add more rows to the container in the futurue, so I need to get a different approach, since I only can add one alignment.
Following code has been used.

<template>
    <v-card
        class="rounded-0"
        width="300px"
    >
        <v-img
            :src="cover"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
            cover
        >
            <v-container full-height fluid height="100%">
                <v-row class="align-self-end">
                    <v-col cols="9">
                        <v-card-title class="text-white">{{ title + ' ' + number }}</v-card-title>
                    </v-col>
                    <v-col cols="3">
                        <v-btn
                            v-if="showAddButton"
                            class="icon"
                            variant="plain"
                            color="white"
                            icon="mdi-plus"
                            @click="addToCollection(id)"
                        >
                        </v-btn>
                        <v-btn
                            v-if="showRemoveButton"
                            class="icon"
                            variant="plain"
                            color="white"
                            icon="mdi-minus"
                            @click="removeFromCollection(id)"
                        >
                        </v-btn>
                    </v-col>
                </v-row>
            </v-container>
        </v-img>
    </v-card>
</template>

<style>
.icon {
    font-size: 30px !important;
    opacity: 1 !important;
}
</style>
Tags:

2

Answers


  1. 0

    If you inspected your v-container in your browser you’d see it’s height is not actually 100%. Your container:

    <v-container full-height fluid height="100%">

    From the documentation:

    The class fill-height applies height: 100% to an element

    Emphasis on class of fill-height and not prop. height is also not a valid prop. Remove both and add the class to the element (the class also applies display: flex for you):

    <v-container class="fill-height" fluid>

    Alternatively, you don’t need to rely on Vuetify provided props and class names for everything. You always have the option to apply good old CSS:

    <v-container fluid style="height: 100%; display: flex;">
    Login or Signup to reply.
  2. 0

    The VImg allows you to pass props to its nested VResponsive. Using the :content-class prop, you can make the responsive container flex, allowing you to use simple alignment on your container:

    <v-img
  ...
  content-class="d-flex"
>
  <v-container fluid class="align-self-end">
    ...
  </v-container>
</v-img>

    const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-card
              class="rounded-0"
              width="300px"
          >
              <v-img
                  src="https://picsum.photos/300/200"
                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
                  cover
                  content-class="d-flex"
              >
                  <v-container fluid class="align-self-end">
                      <v-row>
                          <v-col cols="9">
                              <v-card-title class="text-white">Random Image</v-card-title>
                          </v-col>
                          <v-col cols="3">
                              <v-btn
                                  class="icon"
                                  variant="plain"
                                  color="white"
                                  icon="mdi-plus"
                              >
                              </v-btn>
                              <v-btn
                                  class="icon"
                                  variant="plain"
                                  color="white"
                                  icon="mdi-minus"
                              >
                              </v-btn>
                          </v-col>
                      </v-row>
                  </v-container>
              </v-img>
          </v-card>
        </v-main>
      </v-app>
  `,
  setup(){
    
    return {
      
    }
  }

}
createApp(app).use(vuetify).mount('#app')
    .icon {
    font-size: 30px !important;
    opacity: 1 !important;
}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search