Vuetify: [Bug Report] Fullscreen dialog shows html/body's scrollbar after inner dialog is closed

Created on 19 Oct 2018  路  4Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.3.0
Vue: 2.5.17
Browsers: Chrome
OS: Windows 10

Steps to reproduce

  1. Open codepen. Ensure window height is low enough to cause scrolling of the displayed inputs.
  2. Click 'Open Dialog' button
  3. Click within one of the inputs to open an inner dialog
  4. Click away from the inner dialog. Note the double-scrollbar.

Expected Behavior

The outer (html/body) scrollbar should not be displayed. Only the fullscreen dialog's scrollbar should be displayed.

Actual Behavior

The outer (html/body) scrollbar is displayed when the inner dialog is closed.

Reproduction Link

https://codepen.io/185driver/pen/QZrMPM

Additional Comments:

  1. Ironically, the double-scrollbar returns to a single scrollbar while the inner dialog is being displayed.
  2. This is similar to, but not exactly the same as, the recently fixed #2597 bug.
VDialog bug

Most helpful comment

This is something I still plan to implement and began to here https://github.com/vuetifyjs/vuetify/tree/feat/stack-service . However, it did not make the cut for v2.0

All 4 comments

In order to solve this we are going to have to move the scrollbar visibility to the Vuetify object.

I use vue2-perfect-scrollbar to solve this issue (wrap outer html/body with perfect-scollbar).

This is something I still plan to implement and began to here https://github.com/vuetifyjs/vuetify/tree/feat/stack-service . However, it did not make the cut for v2.0

Any news about this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aaronjpitts picture aaronjpitts  路  3Comments

efootstep picture efootstep  路  3Comments

sebastianmacias picture sebastianmacias  路  3Comments

paladin2005 picture paladin2005  路  3Comments

KuroThing picture KuroThing  路  3Comments