CODEWITHSUNDEEP
cssvuetify.js
Tan Nguyen
Tan Nguyen

Reputation: 323

Vuetify navbar (v-app-bar) overlap scrollbar

The same problem as this post except it is Vuetify.

Is there any solution that use provided API? CSS would be the last option I choose.

codepen demo

<template>
  <v-app-bar app dark absolute class="navbar-bg" >
    <v-app-bar-nav-icon @click="toggleSidebar" />

    <v-toolbar-title>Homepage</v-toolbar-title>

  </v-app-bar>
</template>

Upvotes: 1

Views: 1730

Answers (1)

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

Currently, there's no a single prop in API.

But you may help yourself a lot with a built-in vuetify classes and directives.

First of all, you (sadly) need to write some CSS to manually disable initial page scrolling:

html {
  overflow-y: hidden;
}

.scrollable {
  overflow-y: scroll;
}

Then you need to add <v-main> component to your application with scrollable pt-0 mt-16 classes and wrap all of your future app components into it. This classes will adjust the padding from the default <v-app-bar> and enable scrolling directly in <v-main>.

Finally, you should add v-resize directive to <v-main> to automatically recalculate your page size when user will resize a page:

<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
    ...your application data...
</v-main>

...
methods: {
  onResize() {
    //64px is v-app-bar height in your case
    document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
  }
},

That's it. You may then create your custom component to wrap <v-main> and forget about such manipulations.

Codepen link with an example

Upvotes: 1

Related Questions