Full-height in maximized dialog doesn't fit the page properly [Solved]



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


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