Vuetify Maximize Height of v-list

user_9406165 0
Viewed 847

I have this very simple chat app here: enter image description here

It contains of a Header and then v-main. Inside v-main I first have a v-container containing a v-card. This v-card element has the Name as an title, then a v-list containing the messages, and finally, divided by an v-divider a simple v-form. The end of v-app also contains a v-footer.

Treeview:

v-app

  • v-app-bar
  • v-main
    • v-container
      • v-card
        • v-card-title
        • v-divider
        • v-list
        • v-divider
        • v-form
  • v-footer

Current code inside v-main->v-container: The v-containersimply has the fluid property on it.

<template>
    <v-card>
        <!-- Card Title -->
        <v-card-title>
          {{ messageInfo.sender }}
        </v-card-title>

        <v-divider></v-divider>

        <!-- Messages -->
        <v-list
          class="overflow-y-auto"
          v-for="msg in $store.state.messages"
          :key="msg.id"
        >
            <v-list-item>
                <Message :message="msg" :isSender="isSender(msg)" />
            </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <!-- Send Messages -->
        <v-form v-model="valid" ref="form">
          <v-container>
            <v-row justify="center">
              <v-col :cols="10">
                <v-text-field
                  v-model="messageInfo.message"
                  :rules="messageRules"
                  :counter="maximumLength"
                  required
                  rounded
                  flat
                  background-color="primary"
                  color="tertiary"
                  @keydown.enter="validateAndSend"
                ></v-text-field>
              </v-col>

              <v-col :cols="1">
                <v-btn
                  :disabled="!valid"
                  color="tertiary"
                  @click="validateAndSend"
                  icon
                  large
                  fab
                >
                  <v-icon>mdi-message</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
    </v-card>
</template>

Question: Can I maximize the height of the v-list-element, so that my v-form will always end right above the start of the v-footer, regardless of the contents of v-list? I don't have the height of v-list set yet (I think this is the problem, but unsure which height to choose).

I don't want there to be a huge gap between my "content" and the footer.

Also, when there are more messages than in the image, the v-list will simply list them (won't cut off), which then of course pushes down the v-form and the v-footer.

I am very unsure how to do this and couldn't really find anything on google or the vuetify website.

It is not important that the messages are wrapped in a v-list-component. I just need a way to scroll through messages, if necessary.

Additional information: I am very new to vuetify and I am using nuxt.js (don't think that's important though).

nuxt.js vuetify.js vue.js
1 Answers

Height of card:

This layout create scroll card for screen height. You need to set property fill-height for v-container. Then you need to style card by position: absolute

<v-container fluid fill-height>
  <v-card class="card">
    ...
   </v-card>
</v-container>

Styles:

.card {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 14px;
}

Stretching list in card:

Now you need to stretch v-list. I moved v-for from v-list to v-list-item. Then I just added d-flex and flex-column on v-card. Last step is stretch the list by mt-auto

<template>
  <v-card class="card d-flex flex-column">
    <!-- Card Title -->
    <v-card-title>
      {{ messageInfo.sender }}
    </v-card-title>

    <v-divider></v-divider>

    <!-- Messages -->
    <v-list class="overflow-y-auto mt-auto">
      <v-list-item v-for="msg in messages" :key="msg.id">
        <Message :message="msg" :isSender="isSender(msg)" />
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <!-- Send Messages -->
    <v-form ref="form">
      <v-container>
        <v-row justify="center">
          <v-col :cols="10">
            <v-text-field
              v-model="messageInfo.message"
              required
              rounded
              flat
              background-color="primary"
              color="tertiary"
            />
          </v-col>
          <v-col :cols="1">
            <v-btn>
              <v-icon>mdi-message</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-card>
</template>

Scrolling list from bottom to top (pure css):

You also need to reverse scroll for list. You can easily do it by pure css with transform: rotateX(180deg)

Template:

<v-list class="overflow-y-auto mt-auto scroll-container">
  <v-list-item class="scroll-container-item" v-for="msg in messages" :key="msg.id">
    ...
  </v-list-item>
</v-list>

Styles:

.scroll-container {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); /* Safari and Chrome */
  -ms-transform: rotateX(180deg); /* IE 9+ */
  -o-transform: rotateX(180deg); /* Opera */
}
.scroll-container-item {
  -webkit-transform: rotateX(180deg); /* Safari and Chrome */
  -ms-transform: rotateX(180deg); /* IE 9+ */
  -o-transform: rotateX(180deg); /* Opera */
}
user_97096460
Related