[Bug Report] Dialog with only horizontal scroll not scrollable with trackpad or shift+wheel

[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.

[hamishjohnson]

Yes, me also but for a v-card not a v-table. imo @nekosaur should reopen this

[cgiuliani]

I also reproduce with the codepen of @Roman86 and a logitech mouse with horizontal wheel. Is it possible to reopen this issue please @nekosaur ?

[karanssj4]

any update on this?

[bgschiller]

Still experiencing this bug. Here it is with just a v-dialog, no v-table or v-card required https://codepen.io/bgschiller/pen/abJbmWv

[pisethx]

Should reopen this

[rubera]

I also faced this bug. You can put any wide enough div with 'overflow-x: scroll'. Scrolling does not work. Same markup with the same div BUT not in v-dialog works just fine.

Please fix.

[mersoz]

I always resorted to a calculated height on the data table based on the number of rows. Since the calculation is pixel based (too hardcoded), the scroll still breaks on different zoom levels inside the browser.

This solution is working for me:

.v-data-table__wrapper {
  overflow-y: scroll !important;
}

.v-data-table__wrapper table {
  margin-bottom: -1px;
}

[treardon17]

I was able to get around this by adding a wheel event listener on the element I was trying to scroll, and then using stopPropagation to prevent the event from bubbling up to the dialog where preventDefault was being called on it. It would be nice to have the scrollable prop disable the preventDefault, or if that behavior was configurable by some other means.

[KaelWD]

Playground:

<template>
  <v-app>
    <v-container>
      <v-dialog
        max-width="200"
      >
        <template #activator="{ on }">
          <v-btn v-on="on">Vertical only</v-btn>
        </template>
        <v-card>
          <v-card-text>{{ lorem }}</v-card-text>
        </v-card>
      </v-dialog>

      <v-dialog
        max-width="600"
      >
        <template #activator="{ on }">
          <v-btn v-on="on">Horizontal only</v-btn>
        </template>
        <v-card style="min-width: 200%">
          <v-card-text>{{ lorem }}</v-card-text>
        </v-card>
      </v-dialog>
    </v-container>

    <v-dialog
      max-width="200"
    >
      <template #activator="{ on }">
        <v-btn v-on="on">Both</v-btn>
      </template>
      <v-card style="min-width: 200%">
        <v-card-text>{{ lorem.repeat(3) }}</v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      lorem: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'.repeat(3),
    }),
  }
</script>