Card list can't scroll in mobile view

yschin

I am stuck in create a list by using <q-card></q-card>. These card content is showing some information of bank. I notice when I change to mobile view in order to testing the interface, it can’t scroll, like freezing. But when i refresh my page, it become scrollable. I pasted my code below, help is appreciated!

    <q-toolbar slot="header" class="glossy">
    <q-btn
        flat
        @click="$refs.layout.toggleLeft()"
    >
        <q-icon name="menu" />
    </q-btn>

    <q-toolbar-title>
        BgWin77
        <div slot="subtitle">Banking</div>
    </q-toolbar-title>
    </q-toolbar>

    <div slot="left">
        <sidebar></sidebar>
    </div>

    <div class="layout-padding row items-start justify-center">

        <q-card inline class="bigger" v-for="image in bankImage">
            <q-card-media>
                <img :src="image">
            </q-card-media>
            <q-card-main>
                <table class="q-table">
                    <thead>
                        <tr>
                        <th class="text-center">Bank Location</th>
                        <th class="text-center">Bank Services</th>
                        <th class="text-center">Others</th>                                                     
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td class="text-center">Location A</td>
                        <td class="text-center">ATM</td>
                        <td class="text-center">Bla Bla</td>                            
                        </tr>
                        <tr>
                        <td class="text-center">Location B</td>
                        <td class="text-center">Online Banking</td>
                        <td class="text-center">Bla Bla</td>                        
                        </tr>
                    </tbody>
                </table>
            </q-card-main>
        </q-card>
        
    </div>

</q-layout>

</template>

import {
QCard,
QCardTitle,
QCardMedia,
QCardActions,
QCardSeparator,
QCardMain,
QList,
QItem,
QItemMain,
QItemSide,
QItemTile,
QCollapsible,
QRating,
QBtn,
QParallax,
QIcon,
QPopover,
QVideo,
QLayout,
QToolbar,
QToolbarTitle,
QListHeader

} from ‘quasar’

export default {
name: ‘banking’,
components: {
QCard,
QCardTitle,
QCardMedia,
QCardActions,
QCardSeparator,
QCardMain,
QList,
QItem,
QItemMain,
QItemSide,
QItemTile,
QCollapsible,
QRating,
QBtn,
QParallax,
QIcon,
QPopover,
QVideo,
QLayout,
QToolbar,
QToolbarTitle,
QListHeader,
sidebar

},
data () {
return {
stars: 3,
bankImage: [
‘statics/a.png’,
‘statics/b.png’,
‘statics/c.png’,
‘statics/d.png’
]
}
},
methods: {
goTo (path) {
this.$router.push(path)
}
}
}
</script>

</style>

jimmack1963

A quick guess is that when qcards are small, they scroll just fine as entire qcards. Your card may be large enough that you need something to handle the internal scrolling, or break up the interior into cards which are small enough to scroll. I wouldn’t expect a grid inside a card; rather the contents of maybe a row.

yschin

@jimmack1963 Hi, thanks for your reply. I tried with put <q-scroll-area> wrap those card content, is still not able to scroll.

jimmack1963

Are you able to fake out a bunch of small cards and see if the behavior is what you expect? Or, is it that you have a large card which is not internally scrolling as you expect?