[Vuejs]-Vuetify carousel not taking up full width-height

by

3👍

✅

  1. Remove the padding from v-container by applying a class of pa-0 (sets padding on all sides to 0).

  2. Remove margin and max-width from v-container by setting its fluid prop to true (adding the attribute is enough to set it to true).

  3. On v-carousel, remove the style binding, as that is overridden by its height prop. Instead, set v-carousel‘s height to 100%.

<v-container class="pa-0" 1️⃣
             fluid        2️⃣
             fill-height>

  <v-carousel height="100%" 3️⃣ ⋯>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container class="pa-0" fluid fill-height>
          <v-carousel height="100%" cycle hide-delimiters>
            <v-carousel-item>
              <v-sheet color="red lighten-1" fill-height style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide One
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
            <v-carousel-item>
              <v-sheet color="warning" style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide Two
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
          </v-carousel>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
👤tony19

Leave a comment