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

    First row not visible in QTable with virtual scroll and sticky header if scrollbar is visible

    Help
    1
    2
    395
    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.
    • SB
      SB last edited by

      I’m using QTable with virtual scroll and sticky header. If the number of rows is to high for the initial viewport a scrollbar is shown and the first row is hidden by the sticky header.

      QTable_virtual_scroll.png

      <q-table
        :columns="columns"
        :data="tableData"
        :filter="filter"
        :pagination.sync="pagination"
        :selected.sync="selected"
        :selected-rows-label="getSelectedRowsLabel"
        :rows-per-page-options="[0]"
        @update:selected="changeSelected"
        @row-click="onRowClick"
        row-key="id"
        selection="single"
        table-style="max-height: 295px"
        table-header-class="text-primary"
        class="display-chronology-table"
        virtual-scroll
        binary-state-sort
        dense
      >
      
      ...
      
      <style lang="sass">
        .display-chronology-table
          /* max height is important */
          .q-table__middle
            max-height: 200px
      
          .q-table__top,
          .q-table__bottom,
          thead tr:first-child th /* bg color is important for th; just specify one */
            background-color: #fff
      
          thead tr:first-child th
            position: sticky
            top: 0
            opacity: 1
            z-index: 1
      </style>
      

      I’ve tried different combinations and values for parmas like virtual-scroll-sticky-start and virtual-scroll-sticky-end and usage of resetVirtualScroll() but no result.

      1 Reply Last reply Reply Quote 0
      • SB
        SB last edited by

        Problem was solved with upgrade to quasar v1.5.0

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