QCard to consume full space with margins

[AmosSzust]

Hi

I have a main layout with a fixed top panel that takes Xpx with its height.
I have a page with qPage that I want to always take the remaining space, so no scrollbars should appear.
Inside the qPage I have a qCard that I want to consume all the page's space but leave some margins around it.
Inside the qCard I have a qMarkupTable and depending on the content, its height can be shorter or longer than the parent container, that is, the card. If it's longer, I want the scrollbars to appear on the qMarkupTable level.

I noticed that the card's height depends on its child, so I did the following:

  <q-page class="q-pa-md">
    <q-card class="text-center shadow-8 bg-light-blue-1">
      <q-card-section>
        <q-markup-table
          separator="cell"
          flat
          dense
          class="bg-light-blue-1"
          style="max-height: 81vh"
        >
        </q-markup-table>
      </q-card-section>
    </q-card>
  </q-page>

Notice the style="max-height: 81vh" in the qMarkupTable. On my specific monitor it looks exactly as I want but I think that using 81vh is risky on other monitors and in general it seems like a patch.

Is there a way to achieve this in a nicer/cleaner way? Maybe quasar has classes for this, that I might have missed?
Thanks

[suleimanas]

Yes i would do it using flexbox, add column class to q-page and add a div child with col class just to be more flexible:

<q-page class="column">
  <div class="col">
    <q-card class="fit"></q-card>
  </div>
</q-page>

https://quasar.dev/layout/grid/column
and for the scrolling use the helper classes: https://quasar.dev/style/other-helper-classes#scroll-related

[AmosSzust]

My bad, I forgot to remove style="max-height: 81vh", once I did, the card took the content's height and if the table inside it is long, the scrollbars appear on the page level and not on the table level as before.

Using fit or scroll classes had no effect whatsoever. Am I missing something?

[suleimanas]

use stackblitz.com please, i'll be happy to point it out and help

[AmosSzust]

Apologies for doing it like that but I used this link: https://codepen.io/Daidala/pen/BaBEevE
Paste the following code in the html panel instead of the current code:

<div id="q-app">
  <div class="q-pa-md column">
    <div class="col">
    <q-card class="text-center shadow-8 bg-light-blue-1 fit">
      <q-card-section>
        <div class="overflow-auto">
        <div v-for="index in 100" v-bind:key="index">blah</div>
        </div>
      </q-card-section>
    </q-card>
    </div>
</div>

Bottom line, how can I make the card fit/consume the available height and the inside part (lots of blah text) to have a scrollbar, if needed.
Thanks

[suleimanas]

sorry for the delay, I didn't see the email notification on time,
sure you can do it:

<q-page class="column q-pa-md">
        
        <q-card class="col relative-position">
        
          <q-card-section class="absolute-full scroll">
            
            <div v-for="index in 100" v-bind:key="index">blah</div>
            
          </q-card-section>
          
        </q-card>
          
</q-page>

[AmosSzust]

It works! Thank you very much!
One thing though, now the stickiness of the header and footer of the table is not working, it did before the change.

I tried the following:

table thead,
table tfoot {
  position: sticky;
  z-index: 1;
}
table thead {
  inset-block-start: 0;
}
table tfoot {
  inset-block-end: 0;
  background: #e1f5fe;
}

And the following:

table thead {
  position: sticky;
  top: 0;
}

table tfoot {
  position: sticky;
  bottom: 0;
}