Vuetify: [Feature Request] Full Height Parallax

[JStrebeyko]

Problem to solve

The feature solves an issue of a general inability to have a decent, parallaxed landing page with a sexy parallax spanning over the full viewport's height.

Proposed solution

I suggest having a computed property, say, formattedHeight, that in would be returning a number of this.height (if it's actually a number), but in case its a "full" string, it'd be returning a window.innerHeight. I think that a "half" option would be a nice extra here

I need someone smarter than me to confirm whether it's possible in this v-para-boio computation-wise

[thegoldgoat]

@JStrebeyko I kind of solved the problem.
Just add:
document.getElementById('parallax-id').style.height = '100vh'
in the mounted function.
By the way, I understand this is not a good solution, but it works until the feature is implemented.

[mrsalitre]

But this fails in ipad and ipad pro:

<template>
  <v-parallax
    id="parallax-hero"
    dark
    :src="`${ require(`@/assets/img/car-bg.jpeg`) }`"
  >
    <v-layout
      align-center
      column
      justify-center
    >
      <v-card class="transparent elevation-0">
        <v-card-text class="text-xs-center">
          <h1 class="display-3 white--text mb-3">
            Cars
          </h1>
          <hr>
          <p class="headline white--text">
            Good cars,
            <br>
            Cheap cars
          </p>
          <v-btn 
            color="info" 
            class="black--text"
            round
          >
            call us
            &nbsp;
            <v-icon>call</v-icon>
          </v-btn>
        </v-card-text>
      </v-card>
    </v-layout>
  </v-parallax>
</template>
<script>
export default {
  /* This solution is not definitive, it is only until vuetify implements a v-parallax with 100vh */
  mounted() {
    document.getElementById('parallax-hero').style.height = '100vh'
  }
}
</script>

[mrsalitre]

Using height: 100% fill the white space but eliminates any parallax. I guess it's because, if the image takes up all the size of the screen, there's no remaining image to scroll over, as there's no more image to show.

[thegoldgoat]

@mrsalitre as far as now, I think the best way to create this type of effect is just using regular HTML and CSS: that's what I ended up doing

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.