No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Card list can't scroll in mobile view

    Help
    2
    4
    1643
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Y
      yschin last edited by 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!

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

      1 Reply Last reply Reply Quote 0
      • J
        jimmack1963 last edited by

        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.

        Y 1 Reply Last reply Reply Quote 0
        • Y
          yschin @jimmack1963 last edited by

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

          1 Reply Last reply Reply Quote 0
          • J
            jimmack1963 last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • First post
              Last post