CODEWITHSUNDEEP
vue.jsvuetify.js
KengoWada
KengoWada

Reputation: 5

Vuetify app bar overflow hidden not working

Overflow hidden not working. It creates another scroll bar like in the image

I copied the code directly from Vuetify and tried it in code pen and the results were the same.

<template>
  <v-card class="overflow-hidden">
    <v-app-bar
      absolute
      color="#fcb69f"
      dark
      shrink-on-scroll
      src="https://picsum.photos/1920/1080?random"
      scroll-target="#scrolling-techniques-2"
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>`enter code here`
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-2"
      class="overflow-y-auto"
      max-height="600"
    >
      <v-container style="height: 1000px;"></v-container>
    </v-sheet>
  </v-card>
</template>

Upvotes: 0

Views: 4566

Answers (2)

Yadab Sutradhar
Yadab Sutradhar

Reputation: 659

This is happening for two reasons-

  1. Outer Scrollbar comes from html.
    • bcz your contents like- v-sheet, v-container exceed your screen height
  2. Inner Scrollbar is for v-sheet
    • bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.

There is no fixed height of v-card, it's flexible to it's content. So, don't add overflow-hidden class to it. You should hidden in any of html or v-sheet

Upvotes: 0

RobbeVP
RobbeVP

Reputation: 397

You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)

I would guess the vuetify docs have this so the examples work on their own site.

Upvotes: 1

Related Questions