Vuetify toolbar and centered block makes the page scrollable

Question

As the title says, my page is scrollable when it actually should not.

What I use is a toolbar combined with a centered card. The v-container is fill-height and the layout inside it is centered. The v-toolbar has an attribute 'app', which gives the v-content top-padding that is based on the toolbar height. Because of this padding, the whole page is scrollable when it should not be. Even when everything fits, it only should be scrollable when the screen height is smaller than the card itself. Also, the attribute 'app' is needed to prevent the card showing under the toolbar when the screen is small in height.

Code:

<div id="app">
    <v-app id="inspire">
        <v-toolbar dark fixed app>
            <v-toolbar-title>Toolbar something</v-toolbar-title>
        </v-toolbar>
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center align-center>
                <v-flex text-xs-center>
                    <v-card>
                        <v-card-text>HUH <br /> <br /> <br /> Centered</v-card-text>
                    </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-content>
    </v-app>
</div>

Result:

Note: Somehow I cannot reproduce this problem in CodePen, however, I can reproduce it on a blank Vue project.

Yes, but when fill-height is not used, the block will not be centered. I am also using the latest version of Vue (2.6.9) and Vuetify (1.5.6) — Unknown
That is not the right way of centralizing them. fill-height is used to "Making sure that col element height is filled with parent and child" . You can use <v-layout column wrap justify-center align-center> to centralize and remove the fill-height — DjSh
Another way of centralizing the card<v-layout> <v-flex xs12 sm6 offset-sm3> <v-card></v-card><v-flex><v-layout> — DjSh
When I apply your changes (both of them), the block is not centered vertically. — Unknown

Unknown Unknown · Accepted Answer · 2019-05-24T14:10:51

0

votes

Solution: <!DOCTYPE html> on the base page when rendering Vue

Vuetify toolbar and centered block makes the page scrollable

1 Answers