Vertically aligning multiple v-slide-group in Vuetify

user_8912608 0
Viewed 508

I have more than 1 v-slide-group that the user is seeing.

Some of those v-slide-group will overflow and have arrow showing, and some won't.

However, since the arrow will only begin to take up space when the arrow is showing, it'll lead to a misalignment with the v-slide-group that won't have any overflows.

The question is, how can I best align the multiple v-slide-groups?

P.S. I'm attaching pictures below as reference

A misaligned v-slide-group

What happens when one group overflows and the other didn't

Forced to always show arrows

I could always force to show the arrows, but I'd like the arrows to only be shown if it does overflow

vuejs2 vuetify.js css html javascript
1 Answers

You'll need to use slots to provide the content you want to show. For example:

<template v-slot:prev>
  ... perhaps an icon ...
</template>
<template v-slot:next>
  ... perhaps an icon ...
</template>

And then show or hide the content of the slot based on some overflow indicator that you provide.

user_30525850
Related