Vuetify: [Bug Report] Data table in dialog won't scroll horizontally

[everhardt]

Versions and Environment

Vuetify: 1.0.12
Vue: 2.5.16
Browsers: Chrome 65.0.3325.181
OS: Mac OS 10.13.3

Steps to reproduce

1) Click the button to open the dialog
2) Try to scroll horizontally (it will work)
3) Scroll all the way down in the table
4) Try to scroll horizontally (it will not work)

Expected Behavior

Scrolling horizontally should also work if completely scrolled down

Actual Behavior

The table does not scroll horizontally if completely scrolled down

Reproduction Link

https://codepen.io/everhardt/pen/gedYMP

Other comments

If I use a data table without scrollable on a large enough screen (ie. the dialog will be completely in view and vertical scrolling is not possible), horizontal scrolling is not possible at all, see https://codepen.io/everhardt/pen/bvxbeg

[KaelWD]

Are you using trackpad gestures? It works fine with a mouse.

[everhardt]

I'm using a magic mouse. I asked some others here (both windows and OSX with a regular mouse and 1 guy using a trackpad on Windows), they also have various scrolling issues. Issues that we see (next to what I was reporting) on the first codepen link above:

• when at the top, can scroll to the right, but not back to the left
• when at the bottom, cannot scroll up
• when at the bottom, can scroll back to the left, but not to the right

[nekosaur]

I have not been able to reproduce this. I would be interested to know if @everhardt or his colleagues can reproduce this problem with something else than a data-table in the dialog.

[KaelWD]

Yeah idk if we can fix it either, sounds like some browser weirdness with horizontal overflow.

[everhardt]

I fiddled around with it and noticed that if I comment out these lines (102-104), scrolling works as it is supposed to: https://github.com/vuetifyjs/vuetify/blob/3eae420681529caec682f2ea665f1cc6c0b5d2b0/src/mixins/overlayable.js#L104

[ghost]

Same issue with @everhardt when using MacBook trackpad.

To show the data-table in a dialog:
If the vertical scrolling shows, then the horizontal scrolling will work fine.
While without vertical scrolling, the horizontal scrolling can't work.

Vuetify: 1.0.18
Vue: 2.5.2
Browsers: Safari 11.1.1
OS: Mac OS 10.13.5

[cby016]

Any update on this? I'm having this same issue but it only seems to happen when the max-width attribute is set on the v-dialog element.

[nekosaur]

I have tried to once again reproduce this on a mac with safari without success. If someone can provide a reproducible codepen for this issue we'll take another look.

[benoit-ponsero]

<v-data-table style="height:100%">

>>>.v-table__overflow {
    height:99.9%;
    max-height:99.9%;
    overflow-y: auto !important;
}

seems fix the bug !

[Roman86]

Same issue with @everhardt when using MacBook trackpad.

To show the data-table in a dialog:
If the vertical scrolling shows, then the horizontal scrolling will work fine.
While without vertical scrolling, the horizontal scrolling can't work.

Vuetify: 1.0.18
Vue: 2.5.2
Browsers: Safari 11.1.1
OS: Mac OS 10.13.5

exactly same, mac os with trackpad. Google Chrome and FireFox. If I restrict the v-card height with max-height - both directions scrolling fine. If max-height is large enough to fit the content - there's no scroll at all (but horizontal must still work, it doesn't). I guess it's somehow related to flexbox. I was trying to resolve using various css-hacks, no luck.

link to reproduce:
https://codepen.io/GuttMan/pen/VwYbqMq
Check the table outsize the dialog (wrapped with "scrollthis") - scrolling great.
And the same wrapper+table inside the dialog - doesn't scroll _horizontally_ (until height overflow)

[condda]

exactly same, mac os with trackpad. Google Chrome and FireFox. If I restrict the v-card height with max-height - both directions scrolling fine. If max-height is large enough to fit the content - there's no scroll at all (but horizontal must still work, it doesn't). I guess it's somehow related to flexbox. I was trying to resolve using various css-hacks, no luck.

link to reproduce:
https://codepen.io/GuttMan/pen/VwYbqMq
Check the table outsize the dialog (wrapped with "scrollthis") - scrolling great.
And the same wrapper+table inside the dialog - doesn't scroll horizontally (until height overflow)

I encountered the same issue. Using my macbook's trackpad or magic mouse to scroll horizontally won't work unless there is overflow-y. I can reproduce the issue using the codepen above.