CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
devflow
devflow

Reputation: 144

Vuetify App bar is below the contents. How do i fix it?

before scroll.

while scrolls down.

i'm using Vuetify.js.

When I scroll down, the contents covers the app-bar.

I think simply set z-index causes a lot of problems.

example codepen

my app structure (pseudo)

<v-app>
  <v-app-bar app absolute shrink-on-scroll prominent scroll-target"#a">
  <v-sheet id="a" overflow-y-auto>
    <v-content>
      <keep-alive>
        <router-view>
          ..
            <v-container>
              <v-col>
                <v-expansion-panels>
                  ...
          ..

  <v-footer>

Upvotes: 0

Views: 3374

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Just remove the absolute prop from v-app-bar component :

<v-app>
  <v-app-bar app  shrink-on-scroll prominent scroll-target"#a">
  <v-sheet id="a" overflow-y-auto>

check this pen

Upvotes: 3

Related Questions