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 ?

      <q-page class="row no-wrap">
        <div class="col q-ma-md">
          ... some components
        <div class="col-8 q-ma-md">
          <div class="row full-height"> 
              class="col-2 q-mb-sm"
              class="col-12 q-pa-sm full-height full-width"
            > <!-- style="height: 100%; weight: 100%" ??? -->
              <div v-html="fileHTML" style="" id="source-code"></div>

    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 ?

    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