vuetify.js how to get full width of v-container

Question

I'm new to vuetify.js and started playing around with it.

This is my code.

Admin-panel.vue

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

Here I can see v-container element gets the full width available. What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)

How do I achieve this?

Can you reproduce on [codepen](https://template.vuetifyjs.com)? Afaics it should take full width minus the margins and/or paddings. — Traxo, Jun 26 '18 at 09:42
`` under `' will push this to full width and v-flex will allow some good flexiblity on sizing other things you may not want full width. — Jeff Bluemel, Mar 05 '20 at 14:44

score 46 · Accepted Answer · answered May 07 '19 at 07:39

46

Use the fluid prop:

<v-container 
  fluid
/>

Codepen.

answered May 07 '19 at 07:39

Billal Begueradj

20,717
43
112
130

1

I'm using the same code above that he is and simply adding fluid to v-container does not fix the issue. – Jeff Bluemel Mar 05 '20 at 14:38
1

Which thing means your issue is somewhere else, otherwise what I shared here is mentioned in the official documentation itself @JeffBluemel – Billal Begueradj Mar 05 '20 at 17:43
I using `container--fluid` – doox911 Dec 01 '20 at 08:23

jacstrong · Answer 2 · 2019-05-14T02:30:26.877

7

I was having the same issue.

I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.

Be sure you only have one declared in your app.

edited May 14 '19 at 02:30

answered May 14 '19 at 02:10

jacstrong

191
2
11

score 6 · Answer 3 · answered Oct 09 '18 at 19:42

6

Did you try using the margin and padding classes/props?

<v-container class="red ma-0">

or

<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">

for having the full screen only for mobile devices?

answered Oct 09 '18 at 19:42

Philip Müller

141
3
8

score 3 · Answer 4 · answered Mar 06 '21 at 22:27

The answer posted by @Billial Begueradj is perfect. However, problem may still persist if there's an unchecked v-container tag up the hierarchy.

This will NOT work

<v-container>
  <v-container fluid>This will not work</v-container>
<v-container>

In the above code, the inner v-container tag will not achieve full-width because there's another v-container tag up in the hierarchy that is not set to layout in full-width and it'll effectively limit the inner one

This will work

<v-container fluid>
  <v-container fluid> This will work </v-container>
</v-container>

Setting both the inner and the outer v-container tags to occupy full width resolves it.

score 3 · Answer 5 · answered Jan 04 '22 at 17:33

3

use fluid and remove the padding if any

<v-container fluid class="py-0 px-0"></v-container>

answered Jan 04 '22 at 17:33

tastytim

141
1
3

score 2 · Answer 6 · answered Mar 27 '23 at 12:00

I had the same problem and adding fluid was not enough. It turned out that after create project in the style.css file, #app had the max-width property set to 1280px;. After changing it to width: 100% and padding: 0, it looks the way I wanted.

In style.css

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

to:

#app {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

score 1 · Answer 7 · edited May 14 '19 at 02:49

you may try like this

master.vue

<v-app id="app">
<v-navigation-drawer
        v-model="drawer"
        temporary
        absolute
>
    <sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
        <v-text-field
                color="purple"
                id="globalSearch"
                name="globalSearch"
                label="Search"
                v-model="globalSearch"
                v-validate="'required'"
        ></v-text-field>
        <v-btn to="dashboard" flat>Dashboard</v-btn>
        <v-btn to="login" flat>Login</v-btn>
        <v-btn flat>Register</v-btn>
    </v-toolbar-items>
</v-toolbar>
<v-content>
    <v-container fluid>
        <router-view></router-view>
    </v-container>
</v-content>
<v-footer height="auto">
    <v-card
            flat
            tile
            class="indigo lighten-1 white--text text-xs-center"
    >
        <v-card-text>
            <v-btn
                    v-for="icon in icons"
                    :key="icon"
                    icon
                    class="mx-3 white--text"
            >
                <v-icon size="24px">@{{ icon }}</v-icon>
            </v-btn>
        </v-card-text>
        <v-card-text class="white--text">
            &copy;2018 â€” <strong>Eliyas Hossain</strong>
        </v-card-text>
    </v-card>
</v-footer>
</v-app>

category.vue

<template>
<v-card>
        <v-card-title>
            <div>
                <h2 class="pl-2">Categories</h2>
                <v-btn @click="dialog = !dialog" color="primary" dark>New Category</v-btn>
            </div>
            <v-spacer></v-spacer>
            <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
            ></v-text-field>
        </v-card-title>
</v-card>
</template>

so it will take full space in right side.

score 0 · Answer 8 · answered Jul 21 '22 at 13:34

0

For anyone using nuxt - make sure you apply the fluid prop to the top level v-container in the layout and not the ones in your page components.

 <v-main>
  <v-container fluid>
    <Nuxt />
  </v-container>
</v-main>

answered Jul 21 '22 at 13:34

Daniel Otto

77
6

vuetify.js how to get full width of v-container

8 Answers8

Linked