CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
PyKKe
PyKKe

Reputation: 373

Why can't I set <v-app-bar> height to auto?

Very simple code.

<div>

  <v-app-bar
    app
    flat
  >
    <v-app-bar-title>
      Page Title
    </v-app-bar-title>
  </v-app-bar>

  <v-container fluid>
    <v-card
      height="400"
      outlined
      flat
    >
      <v-card-title>
        Card Title
      </v-card-title>
    </v-card>
  </v-container>

</div>

enter image description here

Everything works as expected, but if I add height="auto" to my <v-app-bar> this happens.

enter image description here

Looks like <v-main> is no more calculated correctly. How can I avoid this issue?

Upvotes: 2

Views: 1257

Answers (3)

bpaul
bpaul

Reputation: 1949

A workaround I used was to explicitly set the height in css. Simply setting the style="height: auto" on the component doesn't work as vuetify will override it. Give your component an ID and add something like the following to your css:

<style lang="scss">
#journal-toolbar {
  height: auto !important;
}

The !important will override the calculated value added by vetify.

Note: Overriding styles in this may have unintended consequences so test well. It worked for my scenario which involved a dynamically sized toolbar extension.

Upvotes: 0

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

Answering the question "why you can't set <v-app-bar> height to auto" you need to deep dive into Vuetify sources.

So, basically <v-app-bar> is the extension of <v-toolbar> component. Looking at the sources, we can find that height style prop is calculated by this code:

genContent () {
  return this.$createElement('div', {
    staticClass: 'v-toolbar__content',
    style: {
      height: convertToUnit(this.computedContentHeight),
    },
  }, getSlot(this))
},

We are interested in how this.computedContentHeight calculates. Look at this code:

computedContentHeight (): number {
  if (this.height) return parseInt(this.height)
  if (this.isProminent && this.dense) return 96
  if (this.isProminent && this.short) return 112
  if (this.isProminent) return 128
  if (this.dense) return 48
  if (this.short || this.$vuetify.breakpoint.smAndDown) return 56
  return 64
},

The answer is: every time when you pass some string into height prop, Vuetify tries to convert it into integer value. You are trying to pass auto value, but parseInt("auto") is NaN. That's why you can't pass this value. I think, it is not explained well in Vuetify docs.

If you are really want to set height:auto, you can set style="height: auto" for your <v-app-bar> component. But, as @yoduh already said, possibly it is not what you want.

Upvotes: 3

yoduh
yoduh

Reputation: 14649

With height="auto", v-main no longer knows how much padding to use to offset your page content from the app-bar because it can't know what height=auto will end up being in pixels ahead of time, so v-main ends up at the top of the viewport behind the app-bar. To avoid the issue, just don't use height="auto". If you want a smaller app-bar, vuetify provides the dense prop that you can use, or you can always specify a specific height pixel value

Upvotes: 1

Related Questions