How to add a sticky note to a q-card?

[wpq]

As part of my page (which is in an outermost q-layout), I also have a modal q-dialog that pops up at some conditions. The actual component is a q-card.

I would like to add to this card a fixed sticky bar at the bottom. I belive that the right way to do that is by using a q-page-sticky.

The problem: the message appears at the bottom of the whole browser page, not in the card.

For reference, the general (simplified) structure is

<template>
  <q-layout
    view="lHh Lpr lFf"
    >
    <q-page-container
      class="q-pa-md">

      (... content of the page with inputs, buttons etc. ...)

      <q-layout>
      <q-dialog (...)>
        <q-card>
          <q-card-section>
            (...)
          </q-card-section>
          <q-card-section>
            (...)
          </q-card-section>
        </q-card>

        <q-page-sticky position="bottom">
          the text I want to have at the bottom of the card
        </q-page-sticky>

      </q-dialog>
      </q-layout>

    </q-page-container>
  </q-layout>
</template>

I tried to move the q-page-sticky section within the q-card- same problem.

Is there a way to have it in the q-card?

Note: the height of the q-card is fixed.

[dobbel]

@wpq

Please create a codepen.io for better support .

[Ilia]

@wpq try

<q-card class="relative-position">
  <div id="sticky" class="absolute-bottom">Sticky content</div>
</q-card>

Hope that helps

[dobbel]

@ilia

That is just posting code. You can easily create a codepen.io by using one of quasar’s example codepen’s.