CODEWITHSUNDEEP
vue.jsflexboxvuetify.js
Joshua
Joshua

Reputation: 638

Vuetify Flex Layout - is not filling the height

I have tried loads of different options with the following code, however, I can't get this to fill the remaining height. (The second layout should fill the remaining height) what am I doing wrong here?

<template>
  <div class="earnIndex">
    <v-container fluid fill-height>
      <v-layout row wrap>
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          xs2
          class="pa-1"
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
      <v-layout column fill-height>
        <v-flex grow>
          <v-card>
            <p>
              test
            </p>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

EDIT:

So here is my new code:

<template>
  <v-layout column wrap>
    <v-flex>
      <v-layout row wrap class="red">
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          class="pa-1"
          xs2
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
    </v-flex>
    <v-flex grow align-content-start>
      <v-card height="100%">
        <p>
          test
        </p>
      </v-card>
    </v-flex>
  </v-layout>
</template>

This creates the following: enter image description here

I would like the card with "test" to start straight after the links at the top, and then fill the rest of the height.

Thank you in advanced for your help!

Regards, Josh

Upvotes: 0

Views: 2608

Answers (2)

discolor
discolor

Reputation: 1396

You don't need as much markup in your scenario and can cut this down to just a few lines.

I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 2.0 (https://vuetifyjs.com/en/components/grids/).

<div class="d-flex fill-height" style="flex-direction:column">
  <v-row class="blue">
    <v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
      <v-btn>{{ i }}</v-btn>
    </v-col>
  </v-row>
  <div class="fill-height" style="background-color: salmon">Down</div>
</div>

Codesandbox example

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362880

Try using column fill-height on the right side, and then grow on the v-flex...

<v-container fluid fill-height>
    <v-layout row wrap>
        <v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
            <v-btn>{{ offer.siteName }}</v-btn>
        </v-flex>
    </v-layout>
    <v-layout column fill-height>
        <v-flex grow>
            <v-card class="fill-height">
                <p> test </p>
            </v-card>
        </v-flex>
    </v-layout>
</v-container>

https://codeply.com/p/bwE5ifP4Pe

Upvotes: 1

Related Questions