[Vuejs]-How to add scroll only for one template

by

1👍

✅

The rendered table elements are not designed/organized the same way in grid mode as in row mode. Inspecting the DOM in the browser shows q-table in row mode has a standard table with header and body

<div
  class="q-table__container q-table--horizontal-separator column no-wrap q-table__card q-table--no-wrap my-sticky-header-table"
>
  <div class="q-table__top relative-position row items-center">...</div>
  <div
    class="q-table__middle q-virtual-scroll q-virtual-scroll--vertical scroll"
  >
    <table class="q-table">
      <!-- table header -->
      <thead>
        <tr>
          <th class="text-left sortable">...</th>
          <th class="text-center sortable">...</th>
          <th class="text-right sortable">...</th>
          <th class="text-right">Carbs (g)</th>
        </tr>
      </thead>
      <!-- table content -->
      <tbody class="q-virtual-scroll__padding">...</tbody>
      <tbody class="q-virtual-scroll__content" tabindex="-1">...</tbody>
      <tbody class="q-virtual-scroll__padding">...</tbody>
    </table>
  </div>
</div>

Which is why a sticky header row requires position: sticky; top: 0; applied to the <th> elements

  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0

In grid mode, there is no <table> used to organize the grid elements

<div
  class="q-table__container q-table--horizontal-separator column no-wrap q-table--grid q-table--no-wrap my-sticky-header-table"
>
  <div class="q-table__top relative-position row items-center">...</div>
  <div class="q-table__middle">
    <table class="q-table">
      <!-- table header -->
      <thead>
        <tr>
          <th class="text-left sortable">...</th>
          <th class="text-center sortable">...</th>
          <th class="text-right sortable">...</th>
          <th class="text-right">Carbs (g)</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- grid content -->
  <div class="q-table__grid-content row">
    <div class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
    <div class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
    <div class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
    <div class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
    ...
  </div>
</div>

You see there is a <table> but it only contains the header information. The grid content is completely separate. Because of that, you don’t need to sticky anything. Just give the grid content a height and overflow: auto which will add a scrollbar to the grid and the table header information will remain positioned on top.

.q-table__grid-content
  height: 310px
  overflow: auto

working sandbox example

👤yoduh

Leave a comment