How to get full height carousel on a page?



  • Hi there,
    Please be patient, I’m just getting started with Quasar and may be missing something obvious. I’m trying to setup a full height carousel on a Quasar page but it won’t go full height. I copied my carousel code directly from the full page example in the docs (minus the modal stuff). Here’s my page code:

    <template>
      <q-page>
          <q-carousel
            color="white"
            arrows
            quick-nav
            class="text-white full-height"
          >
            <q-carousel-slide
              v-for="n in 7" :key="`full-${n}`"
              class="flex flex-center"
            >
              <div class="q-display-3">Step {{ n }}</div>
            </q-carousel-slide>
    
            <q-carousel-control
              slot="control-full"
              slot-scope="carousel"
              position="bottom-right"
              :offset="[18, 22]"
            >
              <q-btn
                rounded push
                color="amber"
                icon="close"
                label="Close me"
                @click="modal = false"
              />
            </q-carousel-control>
          </q-carousel>
      </q-page>
    </template>
    
    <script>
    export default {
      name: 'PageLogin',
    }
    </script>
    
    <style>
    </style>
    

    Here’s my version info:

    Operating System                Darwin(17.5.0) - darwin/x64
    NodeJs                          8.11.1
    
    Global packages
      NPM                           5.8.0
      yarn                          Not available
      quasar-cli                    0.15.14
      vue-cli                       2.9.3
      cordova                       7.0.1
    
    Important local packages
      quasar-cli                    0.15.14 (Quasar Framework CLI)
      quasar-framework              0.15.10 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
      quasar-extras                 1.0.2   (Quasar Framework fonts, icons and i18n.)
      vue                           2.5.16  (Reactive, component-oriented view layer for modern web interfaces.)
      vue-router                    3.0.1   (Official router for Vue.js 2)
      vuex                          3.0.1   (state management for Vue.js)
      electron                      Not available
      babel-core                    6.26.0  (Babel compiler core.)
      webpack                       3.11.0  (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
      webpack-dev-server            2.11.1  (Serves a webpack app. Updates the browser on changes.)
    
    Networking
      Host                          MacBook-Pro.local
      en0                           192.168.0.172
    

    Is the modal stuff required for some reason?

    Update: I think this may be a bug. Adding a height style to match the min-height style on the q-page element seems to fix the issue. This implies that height needs to be defined on the q-page element in order for items it contains to be able to fill 100% height (which matches what I know about CSS). I’ve reported it in GibHub ticket: GitHub 1902.

    Thanks in advance,
    Jason