'Vuetify carousel not taking up full width-height

I want to make a carousel that takes up the full width and height of a viewport. I'm using Vuetify in a vue.js 2 project. Here's my code:

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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 fill-height>
        <v-carousel
  cycle
  hide-delimiters
  style="height: 100%;">
  <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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
(That's a version that will render in stack overflow) The result on my end looks like this: Screenshot of final result

I'm using the latest version of Opera GX to render it, and I'm using vue serve to serve it.

javascripthtmlcssvue.jsvuetify.js


Solution 1:[1]

  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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tony19

Related Questions