Vuetify: [Feature Request] Single Row Horizontal List with unlimited scroll

Created on 6 Apr 2018 · 7Comments · Source: vuetifyjs/vuetify

Problem to solve

Vuetify has Grid list(https://vuetifyjs.com/en/layout/grid-lists) to manage the gallery in grid view. But I have tried different ways to achieve Single line row list.

Here, user needs to scroll to view other images.

In my case,

Image always be 200X200
scroll horizontal

I have tried a solution but that does not work with Firefox

Proposed solution

We can use :
v-card-text -> v-layout
but it does not work with firefox

question wontfix

Source

jrvaja

All 7 comments

That'd be awesome!!!

jordicasesnoves on 7 Apr 2018

Can you show what you've tried? This should probably already be possible.

KaelWD on 8 Apr 2018

@KaelWD Sure, here is my template

<v-expansion-panel expand flat class="transparent elevation-0 vuse-expansion">
  <v-expansion-panel-content class="expansionbg">
    <div slot="header">Attachments ({{mediaList.length}})</div>
    <v-card flat>
      <v-card-text class="overflow-hidden py-0">
        <v-layout row align-content-center v-vuse-scrollbar:x>
          <v-flex
            v-for="media in mediaList"
            :key="media.id"
            px-1
            pb-2
            class="flex-0"
          >
            <div class="pos-relative">

              <img :src="media.src" height="133" width="133px">

              <v-btn small icon class="pos-absolute remove-media" color="basetext" @click="removeMedia(media.id)">
                <v-icon color="white">close</v-icon>
              </v-btn>
            </div>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

v-vuse-scrollbar:x is perfect-scrollbar directive to have horizontal scrollbar.

.flex-0 {
  display: flex;
}

jrvaja on 9 Apr 2018

👍1

@KaelWD I understand the issue.

https://codepen.io/jrvaja/pen/qoLXZb

This is something wrong with my design and its style.

It does work in both browsers.

jrvaja on 9 Apr 2018

This doesn't really seem to have anything to do with vuetify. We can't add classes for every single edge case, and if you're having problems with some other library this isn't really the right place for that.

KaelWD on 9 Apr 2018

I have a quick question if I have fewer elements only say 2 of them how can I align them to left

https://codepen.io/pushpitab/pen/dgEjJR

Do not want the gap to change for the different number of elements.