I have found the problem in 5 minutes (after posting)
“Tourner 7 fois sa langue dans sa bouche avant de parler”

I had just to add a <div class=“column full-height”> directly under my q-card :

<!--
  Forked from:
  https://quasar.dev/vue-components/dialog#Example--Maximized
-->
<div id="q-app">
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Maximized" color="primary" @click="dialog = true"></q-btn>

    <q-dialog
      v-model="dialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="bg-primary text-black full-height">
        <div class="column full-height">
          <q-bar>
            <q-space ></q-space>

            <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
              <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
              <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
            </q-btn>
          </q-bar>

          <q-card-section class="col bg-white full-height">
            <div class="column full-height">
              <h2>Super Title</h2>
              <q-scroll-area
                class="col"
                visible
              >
                <p v-for="index in 21" :key="index">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
                </p>
              </q-scroll-area>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</div>

I want to put a full-height scroll-area inside a maximized dialog (including a q-card), but the the full-height doesn’t consider the size of the top bar and creates another scroll.

Is this a bug or am I doing something wrong ?

I made a Codepen to show my problem but I don’t have the pro version, so just replace the HTML of the Example–Maximized’s Codepen.

<!--
  Forked from:
  https://quasar.dev/vue-components/dialog#Example--Maximized
-->
<div id="q-app">
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Maximized" color="primary" @click="dialog = true"></q-btn>

    <q-dialog
      v-model="dialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="bg-primary text-black">
        <q-bar>
          <q-space ></q-space>

          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
          </q-btn>
        </q-bar>

        <q-card-section class="col bg-white full-height">
          <div class="column full-height">
            <h2>Super Title</h2>
            <q-scroll-area
              class="col"
              visible
            >
              <p v-for="index in 21" :key="index">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
              </p>
            </q-scroll-area>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</div>

@studio511 you’re welcome

If you don’t want to use a scroll area you can do a dom search to get the scroll area inside your page, then you add a ref argument called ‘myScroll’ (if doesn’t exist yet), then do this after adding a new tree element (if the scroll exist) :

this.$refs.myScroll.setScrollPosition(999999)

Maybe it won’t work cause ref depending on Vue, then use a common Dom id to get the element.

But I don’t think dom manipulation works for mobile (maybe I’m wrong)

@RobbeV what about using a table inside virtual scroll ? It could solve the desktop problem, but change the mobile style.

@studio511 yeah I think using observers is the right way to do it !

Can you post your code of the dynamic q-tree replaced by dynamic lorem ipsum ?

Ps : after thinking 30 seconds, observer is an observer so no you can’t do it with it.

I have found the property scroll-target of the q-virtual-scroll.
Maybe you could dynamically create and id to the last html element and del the last one when you create a new tree element. Then scroll-target to it.
Or simply create an empty div/span with end id, but maybe it could create weird display.
Or you could using the last element of a class you created for it.

There’s also Scroll position

When I’ll be on my computer, I’ll try few stuff, that’s if you can share me the code it will be cool !

Hello,

I have an issue with a q-scroll-area containing <pre>data…</pre>, the behavior that I expect would be to automatically create an horizontal scroll bar when the text overflow in x.

Should I use the css’s property overflow-x: scroll ?
Is there an option in the q-scroll-area component that would allow this behavior ?

I have already tried horizontal option for q-scroll-area, but it remove the vertical scroll bar ; it is still possible to scroll with the mouse, but it is really painful for really long text to go directly on a desired scroll position.

<q-scroll-area visible>
    <div id="source-code">
        <pre>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida. Odio facilisis mauris sit amet massa vitae tortor condimentum. Ornare suspendisse sed nisi lacus. Fames ac turpis egestas maecenas pharetra convallis posuere. Adipiscing bibendum est ultricies integer quis. Commodo nulla facilisi nullam vehicula ipsum a arcu. Interdum varius sit amet mattis vulputate enim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Enim blandit volutpat maecenas volutpat. Sed enim ut sem viverra aliquet eget sit. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Velit ut tortor pretium viverra suspendisse.
            </p>
        </pre>
        <p>
                  Eget est lorem ipsum dolor. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Purus in mollis nunc sed id semper. Id aliquet risus feugiat in ante metus dictum at. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Sed viverra ipsum nunc aliquet. Aliquam faucibus purus in massa tempor. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Nisi scelerisque eu ultrices vitae auctor. Euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus turpis in eu mi. Lectus quam id leo in vitae turpis.
        </p>
    </div>
</q-scroll-area>

@tof06 thx, apparently I’m blind ><

@wolfiton

@JackyLee nice to know, je vais me coucher moins bête
1000:1000
UID:GID
1000 usually the first user/group
stackoverflow