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

    Q-table no horizontal scroll on narrow window

    Help
    3
    10
    1868
    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.
    • CWoodman
      CWoodman last edited by

      I have a q-table that is too wide on mobile. I want it to provide horizontal scrolling (with first column sticky) when the window is too narrow to show all columns, but it’s not working. Just cuts off the table without showing any scrollbar.

      Here’s the code:

      <div class="q-pa-none col">
        <q-table
          class="sticky-header full-height non-selectable"
          ref="table"
          dense
          flat
          square
          virtual-scroll
          :virtual-scroll-sticky-size-start="30"
          :virtual-scroll-sticky-size-end="30"
          :rows-per-page-options="[0]"
          :pagination.sync="pagination"
          :data="tableItems"
          :columns="columns"
          row-key="name"
          selection="single"
          :selected.sync="selected"
          :sort-method="customSort"
          :filter="searchTerm"
          no-data-label="No items match filter and category setting"
        >
          <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.label }}
            </q-th>
          </q-tr>
        </template>
          <template v-slot:body="props">
            <q-tr class="cursor-pointer" :props="props"
            @click.native="selectRow(props.row, $event)">
              <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
                <span v-if="col.name === 'stock'">
                  <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" class="q-pl-xs" />
                </span>
              </q-td>
            </q-tr>
          </template>
          <template v-slot:bottom>
            <div class="row" style="width: 100%">
              <div class="col-8">
                <div v-if="searchTerm">
                  <div v-if="inCategoryName === allCategories">
                    Showing search result {{ stockStatus }} in all categories
                  </div>
                  <div v-else>
                    Showing search result {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                  </div>
                </div>
                <div v-else>
                  <div v-if="inCategoryName === allCategories">
                    Showing {{  tableItems.length }} items {{ stockStatus }} in all categories
                  </div>
                  <div v-else>
                    Showing {{  tableItems.length }} items {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                  </div>
                </div>
              </div>
              <div class="col q-pl-sm">
                <div>
                  Total value: {{ totalValueDisplay }}
                </div>
              </div>
            </div>
          </template>
        </q-table>
      </div>
      
      1 Reply Last reply Reply Quote 0
      • Shoooryuken
        Shoooryuken last edited by

        hi, it is possible that <q-td auto-width interfere with <q-table dense can you try to delete auto-width ?

        CWoodman 1 Reply Last reply Reply Quote 0
        • CWoodman
          CWoodman @Shoooryuken last edited by

          @Shoooryuken OK I removed the auto-width. But still not getting horizontal scrolling.

          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @CWoodman last edited by

            @CWoodman

            What if you disable virtual scroll?

            codepen?

            CWoodman 1 Reply Last reply Reply Quote 0
            • CWoodman
              CWoodman @dobbel last edited by

              @dobbel Removed virtual-scroll but still no horizontal scrolling. Vertical works still, so guess I don’t need the virtual-scroll unless I want a custom scrollbar.

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @CWoodman last edited by dobbel

                @CWoodman

                By default ( see quasar examples) horizontal scrollbar works. So something is ‘wrong’ with your code. You could remove properties to the bare minimum and disable any custom css to see if it makes a difference(a global overflow: hidden maybe) .

                Without codepen it’s hard to tell…

                CWoodman 2 Replies Last reply Reply Quote 0
                • CWoodman
                  CWoodman @dobbel last edited by

                  @dobbel OK I’ll play with it some more. Maybe start with a minimal table and add stuff I want until it breaks. Thanks. If I’m stuck, I’ll post a reply with some code.

                  1 Reply Last reply Reply Quote 0
                  • CWoodman
                    CWoodman @dobbel last edited by

                    @dobbel Got it working. Upgraded to the latest Quasar and now it works as expected.

                    dobbel 1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel @CWoodman last edited by

                      @CWoodman

                      You did not have to change anything apart from upgrading?

                      CWoodman 1 Reply Last reply Reply Quote 0
                      • CWoodman
                        CWoodman @dobbel last edited by

                        @dobbel Yes it works fine. Should have upgraded a while ago. Sorry for the bother.

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