Flexbox and q-scroll-area's height
Hello, I’m trying out to place a scroll area at the bottom left
I have tried many way, i feel like i don’t handle the problem in the right way.
I have notice that if I don’t put “full-height” on the row’s div, the scroll area has no height (doesn’t appear), but if I put it, it creates a half full-height button and half full-height scroll-area.
And if i use height: 100% in scroll-area, it is overflow the page height and creates a scroll on the whole page.
Maybe I should try to separate the scroll area and put it in a component ?
<template> <q-page class="row no-wrap"> <div class="col q-ma-md"> ... some components </div> <div class="col-8 q-ma-md"> <div class="row full-height"> <q-btn-dropdown class="col-2 q-mb-sm" ... > ... </q-btn-dropdown> <q-scroll-area :thumb-style="thumbStyle" class="col-12 q-pa-sm full-height full-width" visible > <!-- style="height: 100%; weight: 100%" ??? --> <div v-html="fileHTML" style="" id="source-code"></div> </q-scroll-area> </div> </div> </q-page> </template>
nb : I have also a problem with q-scroll-area, if I put “horizontal” I don’t have scroll on vertical, and if I don’t put it, I only have the vertical even when the horizontal is needed ! Should I create a post about it ?
The key here, for your right column with dropdown & scrollarea, is to use a
columnclass, not a
@tof06 How yeah that’s perfect ! Thank you !
I have search in documentation but I haven’t find any explanation about column, do you have some links about it ?
@tof06 thx, apparently I’m blind ><