Flexbox and q-scroll-area's height



  • Hello, I’m trying out to place a scroll area at the bottom left

    alt text

    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 ?



  • @yo Do you want something like this ?
    https://codepen.io/cp-tof06/pen/bGdKXpW

    The key here, for your right column with dropdown & scrollarea, is to use a column class, not a row



  • @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 ?



  • @yo column class is described here : https://quasar.dev/layout/grid/column



  • @tof06 thx, apparently I’m blind ><


Log in to reply