How to get full height carousel on a page?

[jasonl]

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

[CristalT]

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

<template>
    <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>
                <div class="carousel-subtitle" v-html="slide.texto" />
            </div>
        </q-carousel-slide>
    </q-carousel>
</template>

<script>
export default {
    created() {
        this.windowHeight = window.innerHeight + 'px'
    }
}
</script>