1

I'm having a difficult time setting the height to match size of the browser window and setting the color of vuetify's card.

I've copied the example code from vuetiy as show below:

<template>
  <v-card
    class="mx-auto"
    height="400"
    width="256"
  >
    <v-navigation-drawer
      class="deep-purple accent-4"
      dark
      permanent
    >
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>

      <template v-slot:append>
        <div class="pa-2">
          <v-btn block>
            Logout
          </v-btn>
        </div>
      </template>
    </v-navigation-drawer>
  </v-card>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Account', icon: 'mdi-account-box' },
          { title: 'Admin', icon: 'mdi-gavel' },
        ],
      }
    },
  }
</script>

But the colour doesn't show up as purple. Instead it's showing as dark grey. If I remove the dark attribute in v-navigation-drawer then it just appears white.

Changing the v-card's height to 100% seems to just change the card's height to 100 instead of 100%. I'm really confused as from what I can see here, How to set the height of vuetify card, having

<v-card
   height=100%
>

would have fixed the issue but it doesn't. I must be missing something simple?

Mark
  • 730
  • 1
  • 8
  • 22
  • The drawer should be a direct descendent of `v-app` and have the `app` property bound to it to make it fill the entire height on the left. It also should not sit inside of a card component. – Ohgodwhy Mar 07 '21 at 02:50
  • But that is directly taken from vuetify's docs. https://vuetifyjs.com/en/components/navigation-drawers/#combined-drawer – Mark Mar 07 '21 at 05:08

1 Answers1

1

So I did end up able to modify change the height and the colour although I'm not sure why it can't be done within the card tag.

In the navigation drawer I made some changes as shown below and the color as well as the height changed.

<v-navigation-drawer
      class="accent-4"
      width="200"
      height="100vh"
      color="rgba(56, 95, 115,0.5)"
      permanent
    >

I also removed the v-card tag completely.

Mark
  • 730
  • 1
  • 8
  • 22