Content size - Vuetify

Question

I'm trying that the lower right component will fill all its space,
I've placed a div element but for some reason, it won't fill out the whole width
I want it to fill everything from the sidebar to the end (also full height).
I don't want to use CSS positioning for this.
I tried width: 100% but it doesn't work

code:

<template>
  <div>
    <v-navigation-drawer v-model="drawer" clipped fixed app>
      <v-list dense>
        <v-list-tile class="mt-3" @click>
          <v-list-tile-action>
            <v-icon color="darken-1">add_circle_outline</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>Subscribe</v-list-tile-title>
        </v-list-tile>
        <v-list-tile disabled @click>
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile disabled @click>
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <div class="editor" style="border: 1px solid red; width: 100%;">
        <v-flex xs12 sm6 md3>
          <v-text-field
          readonly
            label="Regular"
            placeholder="Placeholder"
          ></v-text-field>
        </v-flex>

    </div>
    <v-footer app fixed>
      <span>&copy; 2017</span>
    </v-footer>
  </div>
</template>

<script>
export default {
  data: () => ({
    drawer: null
  }),
  props: {
    source: String
  }
};
</script>

DjSh DjSh · Accepted Answer · 2019-03-27T18:30:42

You are missing the v-content. You need to replace your

<div class="editor" style="border: 1px solid red; width: 100%;">
    <v-flex xs12 sm6 md3>
      <v-text-field
      readonly
        label="Regular"
        placeholder="Placeholder"
      ></v-text-field>
    </v-flex>

</div>

with:

<v-content>
    <v-container fluid style="border: 1px solid red;">
        <v-text-field
             readonly
             label="Regular"
             placeholder="Placeholder"
      ></v-text-field>
    </v-container>
</v-content>

You can read more about it Here.

And as you add more elements to your v-container it will expand in height.

If you add fill-height to v-container, it will take the whole height.

Content size - Vuetify

1 Answers