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:

            class="text-white full-height"
              v-for="n in 7" :key="`full-${n}`"
              class="flex flex-center"
              <div class="q-display-3">Step {{ n }}</div>
              :offset="[18, 22]"
                rounded push
                label="Close me"
                @click="modal = false"
    export default {
      name: 'PageLogin',

    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.)
      Host                          MacBook-Pro.local

    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,

  • The best way I found is setting height with on component created with JavaScript. I’t worked for me.

        <q-carousel class="text-white" :height="windowHeight" arrows color="white" infinite autoplay>
            <q-carousel-slide :img-src="slide.imagen" v-for="(slide, index) in slides" :key="index">
                <div class="carousel-caption">
                    <div class="carousel-title">
                        {{ slide.titulo }}
                    <div class="carousel-subtitle" v-html="slide.texto" />
    export default {
        created() {
            this.windowHeight = window.innerHeight + 'px'

Log in to reply