q-scroll-area dosen't work for horizontal

Sujan Dev

hi,
I want to scroll list of card in a div horizontally. by default q-scroll-area works for vertical scrolling. what can i do ? is there any better way ?

attached image is exactly what i want to do (on swipe it scroll to right )

my code:

    <q-scroll-area style="width: 1400px; height: 200px;" >
      
        <q-card inline v-for="n in 10"  :key="n">
          <q-card-title>
            Title
            <span slot="subtitle">Subtitle</span>
          </q-card-title>
          <q-card-main>
            {{lorem}}
          </q-card-main>
        </q-card>
      
    </q-scroll-area>

</div>

rstoenescu

It’s only meant to work for vertical scrolling. Horizontal will get enhanced in a later update.

Sujan Dev

@rstoenescu thanks for the reply. waiting for the update .

sarah

It seems to be enhanced on v0.17.0. (https://github.com/quasarframework/quasar/issues/2163)
But the document didnt update. (https://quasar-framework.org/components/scroll-area.html)
Still not sure how to use it.
Is all i need to do is add width on q-scroll-area tag?

tandrew

+1 regarding the documentation of this feature. I would like to use it.

jeimz173

when we can download this scroll area horizontal update?.. im excited!

metalsadman

It was implemented sometime ago, but there isn’t an example out there.

jeffatpf

Check out vue-dragscroll - https://donmbelembe.github.io/vue-dragscroll/