3. Card list can't scroll in mobile view

Card list can't scroll in mobile view

  • Y

    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!

    <template>
    <q-layout
    ref=“layout"
    view=“lHh Lpr fff”
    :left-class=”{‘bg-grey-2’: true}"
    >

        <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>

    <script>
    import sidebar from ‘…/components/sidebar/sidebar’

    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 lang=“stylus”>

    </style>

    0
  • J

    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.

    0
    Y
     1 Reply
  • Y

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

    0
  • J

    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?

    0