CODEWITHSUNDEEP
vue.jsvuetify.js
KyleMit
KyleMit

Reputation: 29937

Vuetify App Bar too tall - takes up half the screen

When I have an otherwise empty app with a v-app-bar inside of the v-app container, the app bar takes up half of the page.

<v-app>

  <v-app-bar color="deep-purple" dark >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

Demo in Codepen

Screenshot Example

I've tried adding options for dense, short, & height but they don't seem to have any affect.

The docs have plenty of code samples with this exact App Bar markup, so I'm trying to figure out what's going wrong.

Upvotes: 20

Views: 13934

Answers (4)

DragonFire
DragonFire

Reputation: 4092

You can set custom height using the following

<v-app-bar color="blue accent-3" height="200px" dark >

Upvotes: 0

Altaye Zekariyas
Altaye Zekariyas

Reputation: 1

rounding v-app-bar tag with nav tag will work fine

Upvotes: 0

Olivier Hendrikx
Olivier Hendrikx

Reputation: 19

Add the class="flex-grow-0" to your app-bar. This will prevent your problem.

Upvotes: 1

KyleMit
KyleMit

Reputation: 29937

You need to add the app property to v-app-bar like this:

<v-app>

  <v-app-bar color="deep-purple" dark app >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

The key here is all child elements in the App component must indicate whether they should use the app layout

From Vuetify > Components > Application > Default Markup:

You can place your layout elements anywhere, as long as you apply the app property.

From Vuetify > Components > App Bar > API:

app
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content component to function properly.

Screenshot of Fix

Upvotes: 49

Related Questions