I am building a chat view. On mobile devices, i want to span the parent div containing the <q-scroll-area> as big as possible using a column flex container. Unfortunately the q-scoll-area seems to break when it is inside a .col (which is a flex class intended to take full height when set inside a .column parent).
what i want as a minimal example:
<template>
<div class="column col fit">
<div class="col">
<q-scroll-area class="q-pa-md fit">
<div v-for="dummymessage of 50" :key="dummymessage"> message: {{ dummymessage }}</div>
</q-scroll-area>
</div>
<div class="col-auto">INPUT</div>
</div>
</template>
Now i dont see any output inside the q-scroll-area. Rendered output.
The weird thing is, that the divs appear in the inspector:
Inspector displaying the DOM including the dummymessages The problem seems to be that q-scroll-area requires the parent to provide an explicit height.
The following example would work, but in order to have a responsive view i would need to calculate heights which is an option, but only if i understand why my dream approach does not work.
<template>
<div class="column col fit">
<div class="" style="height: 400px">
<q-scroll-area class="q-pa-md fit">
<div v-for="dummymessage of 50" :key="dummymessage"> message: {{ dummymessage }}</div>
</q-scroll-area>
</div>
<div class="col-auto">INPUT</div>
</div>
</template>
Output screenshot: Screenshot of the rendered result Any ideas on this?
Update: When i go to the browser inspector, find the scroll-area container in the DOM q-scrollarea__container scroll relative-position and toggle the position: relative off and then back on, the desired behaviour is there. This feels like a bug on quasar's site or a misuse on my side.
Update2: After trying to reproduce inside a playground i could not reproduce the problem.
I now know the reason why it does not work by default. Quasar sets their heights on to min-height: someInternallyCalculatedHeight. q-scroll-area requires an explicit height: someValue to be defined. The in depth answer lies somewhere in how q-scroll-area is designed. Still seeking for better ideas.