CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Otto
Otto

Reputation: 693

Changing the Vuetify carousel height

Is it possible to reduce the height of a <v-carousel>? I saw in the documentation that they were working on it, but has it been implemented yet? If not is there a work around? I'm just trying to set a max height.

Upvotes: 9

Views: 16318

Answers (4)

mr_squall
mr_squall

Reputation: 2381

You can set auto height of it:

<v-carousel height="auto">

Upvotes: 26

Fabio Zanchi
Fabio Zanchi

Reputation: 945

There's no need to use CSS neither important on it. You can use one prop to change the height:

Name: height

Default: 500

Type: number | string Sets the component height

Eg.

  <v-carousel height="500px">
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
    ></v-carousel-item>
  </v-carousel>

Upvotes: 5

Ivan Stanisavljevic
Ivan Stanisavljevic

Reputation: 11

If you want dynamic height of v-carousel based on image, for example.
You can use something like this:

example:

<v-carousel :style="{'height': this.carouselHeight}">
   <v-carousel-item v-for="(item, index) in items" :key="index" style="height: auto" :src="item.image"></v-carousel-item>
</v-carousel>
  1. set data prop:
data () {
 return {
carouselHeight: 0
  {
 }
  1. create method:
getCarouselHeight () {
  var item = document.getElementsByClassName('v-image__image--cover')
   this.carouselHeight = item[0].clientHeight + 'px'
  }
  1. call method on mounted:
mounted () {
this.getCarouselHeight()
}

Upvotes: 1

Un1
Un1

Reputation: 4132

In your main vue component or in the component where you have the v-carousel add a css rule:

.carousel {
  height: 200px !important;
}

  • Add !important if it's not working without it

  • If you're putting this rule in the main component make sure the <style> tag doesn't have the word scoped in it

Upvotes: 4

Related Questions