Search code examples
vue.jsflexboxvuetify.jscss-grid

Make v-card stretch to the bottom of the parent component

I have v-card that is inside of v-navigation-drawer:

 <v-navigation-drawer
      dark
      src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
      width="100%"
      permanent
      class="rounded"
    >
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
      <v-card-text>A Text</v-card-text>
      <v-card class="blue elevation-7" width="240">
        <v-card-text>
          <div class="font-weight-bold ml-8 mb-2">Today</div>

          <v-timeline align-top dense>
            <v-timeline-item
              v-for="message in messages"
              :key="message.time"
              :color="message.color"
              small
            >
              <div>
                <div class="font-weight-normal">
                  <strong>{{ message.from }}</strong> @{{ message.time }}
                </div>
                <div>{{ message.message }}</div>
              </div>
            </v-timeline-item>
          </v-timeline>
        </v-card-text>
      </v-card>
    </v-navigation-drawer>

How can I make it to stretch/fill in to the bottom of the parent component so that parent component remains same height as the rest of the grid?

Here is helper picutre of what im trying to achieve (marked by black lines I tried to have the nav-drawer have the same height as the content on the right (3 cards) also the card inside the nav-drawer should fill it to the bottom but not past it.

enter image description here

Here is the minimal reproducible example where you can see yourself that its not working:

https://codesandbox.io/s/vuetify-playground-barchart-forked-c08hr?file=/src/components/dashboard/MiniMenu.vue

Solution

  • First, Let me just repeat what I understood:

    • you want to make the navigation drawer height to be equal to the content
    • you want the card inside the navigation drawer to fill the height of the navigation drawer

    to get your first point done all you have to do is to remove the value of min-height property (by default its 100vh):

    .v-application--wrap {
  min-height: unset;
}

    In this way, the application height will fit your content.

    now to the second problem, in order to make the card fill the rest of the navigation drawer, you'll need some help from flexbox source

    .v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}

    I've tried my solution on your example and here's the complete code of the vue file

    <template>
  <v-navigation-drawer
    src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
    width="240"
    permanent
    floating
    class="rounded flex-shrink-0 mr-3"
  >
    <div>
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
    </div>
    <v-card-text>A Text</v-card-text>
    <v-card class="blue elevation-7" width="240">
      <v-card-text>
        <div class="font-weight-bold ml-8 mb-2">Today</div>

        <v-timeline align-top dense>
          <v-timeline-item
            v-for="message in messages"
            :key="message.time"
            :color="message.color"
            small
          >
            <div>
              <div class="font-weight-normal">
                <strong>{{ message.from }}</strong> @{{ message.time }}
              </div>
              <div>{{ message.message }}</div>
            </div>
          </v-timeline-item>
        </v-timeline>
      </v-card-text>
    </v-card>
  </v-navigation-drawer>
</template>

<script>
export default {
  data: () => ({
    messages: [
      {
        from: "You",
        message: `Sure, I'll see you later.`,
        time: "10:42am",
        color: "deep-purple lighten-1",
      },
      {
        from: "John Doe",
        message: "Yeah, sure. Does 1:00pm work?",
        time: "10:37am",
        color: "green",
      },
    ],
  }),
};
</script>

<style>
.v-application--wrap {
  min-height: unset;
}

.v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}
</style>

    and here's a screenshot of the result enter image description here

    EDIT

    I've noticed from the comments that you also want to get rid of the space (padding) inside the navigation drawer. To do this you simply have to add px-0 and py-0 classes to your navigation drawer.

    class="rounded flex-shrink-0 mr-3 px-0 py-0"

    ps: notice that I had to wrap the two v-btns with so that they don't get affected by the display: flex property of their parent.

    here's an updated picture of the final output example enter image description here