Environment
Vuetify Version: 2.5.8
Vue Version: 2.6.11
Browsers: Chrome 94.0.4606.61
OS: Mac OS 10.15.7, Android
Steps to reproduce
- click the 'Show bug' button.
Expected Behavior
The overflow arrow indicators should show up with the slide group as it overflows its container v-sheet.
Actual Behavior
The arrows do not show up until click on an item.
Reproduction Link
https://codepen.io/Kohn1/pen/KKqGjme
Other comments
|
this.widths = { |
|
content: content ? content.clientWidth : 0, |
|
wrapper: wrapper ? wrapper.clientWidth : 0, |
|
} |
|
|
|
// https://github.com/vuetifyjs/vuetify/issues/13212 |
|
// We add +1 to the wrappers width to prevent an issue where the `clientWidth` |
|
// gets calculated wrongly by the browser if using a different zoom-level. |
|
this.isOverflowing = this.widths.wrapper + 1 < this.widths.content |
A possible cause might be that this.isOverflowing is not correctly calculated when the element is hidden, in which case content.clientWidth would be 0. A solution I can come up with is to watch the visibility changes and re-calculate this.isOverflowing when there is a change (with Intersection Observer API or something; might sound a little heavy).
A workaround: invoke .onResize() or .setWidths() after changing visibility.
<v-btn @click="show = true; $refs.group.setWidths()">
Environment
Vuetify Version: 2.5.8
Vue Version: 2.6.11
Browsers: Chrome 94.0.4606.61
OS: Mac OS 10.15.7, Android
Steps to reproduce
Expected Behavior
The overflow arrow indicators should show up with the slide group as it overflows its container
v-sheet.Actual Behavior
The arrows do not show up until click on an item.
Reproduction Link
https://codepen.io/Kohn1/pen/KKqGjme
Other comments
vuetify/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
Lines 429 to 437 in 4c3e561
A possible cause might be that
this.isOverflowingis not correctly calculated when the element is hidden, in which casecontent.clientWidthwould be 0. A solution I can come up with is to watch the visibility changes and re-calculatethis.isOverflowingwhen there is a change (with Intersection Observer API or something; might sound a little heavy).A workaround: invoke
.onResize()or.setWidths()after changing visibility.