[Bug Report] v-skeleton-loader height, min-height and max-height does not work

[angelofan]

Environment

Vuetify Version: 2.3.2 Vue Version: 2.6.11 Browsers: Chrome 83.0.4103.116 OS: Windows 10

Steps to reproduce

<v-skeleton-loader type="image" height="250" style="background:#ff9900"></v-skeleton-loader>

<v-skeleton-loader type="image" min-height="250" style="background:#99ff00"></v-skeleton-loader>

<v-skeleton-loader type="image" height="100vh" max-height="250" style="background:#0099ff"></v-skeleton-loader>

The skeleton animation has always been 200px in height, The height of the outer div is the height I set.

Expected Behavior

The height I set for v-skeleton-loader is the height of the animation.

The same is true for max-height and min-height.

Actual Behavior

The height I set for v-skeleton-loader is the height of the parent div of the animation, and the height of the animation itself is always 200px.

The same is true for max-height and min-height.

Reproduction Link

https://codepen.io/13546777510/pen/mdVqmPo

[cassioscabral]

I had to override the CSS for this element to overcome this issue. Like this:

::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
  .v-skeleton-loader__image {
    height: 100%;
  }
}

[jtotty]

The default height for the skeleton-loader-image is set to 200px as stated in the documentation.

You need to override the custom global defaults by setting the variable $skeleton-loader-image-height: 100%; in your own variables.scss file.

More detailed instructions found on the Vuetify Documentation for Vue CLI, Nuxt.js, and Webpack.

https://vuetifyjs.com/en/features/sass-variables/

[mostlycloudysky]

@jtotty Can you please show an example for skeleton loader as i tried the same option and it didn't work.

[jtotty]

@jtotty Can you please show an example for skeleton loader as i tried the same option and it didn't work.

SASS/SCSS variables are supported when using the vuetify-loader. This is done automatically when using the vue-cli-plugin-vuetify plugin.

[dfeverxx]

I had to override the CSS for this element to overcome this issue. Like this:

::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
  .v-skeleton-loader__image {
    height: 100%;
  }
}

form this .v-skeleton-loader__image.v-skeleton-loader__bone { height: 100%; }

[ness-EE]

Can this be changed to 100% as a fix, making it so users don't have to hack the SCSS? 200px is a magic number, after all.

[angelofan]

I had to override the CSS for this element to overcome this issue. Like this:

::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
  .v-skeleton-loader__image {
    height: 100%;
  }
}

@ness-EE You can use this.

However, vuetify should default to 100% instead of 200px.

[taheri79]

I had to override the CSS for this element to overcome this issue. Like this:

::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
  .v-skeleton-loader__image {
    height: 100%;
  }
}

Not working in my solution

[vigenere23]

The bug is still ongoing. @taheri79 the nested class used is specifically for the image skeleton type. Change it to .v-skeleton-loader__<type> correcponding to your type. For example : .v-skeleton-loader__card for cards.

But even there, for the card, each part of the skeleton (the card header, card image, etc., called "bones") have hardcoded heights to 200px. The main problem seems to come from the fact that the skeleton itself it not made to be flexible, as it's not a flexbox.

[vigenere23]

A more general fix :

::v-deep .v-skeleton-loader > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep .v-skeleton-loader .v-skeleton-loader__bone {
  flex-grow: 1;
}

This verticaly streches every part of the skeleton equaly.

[johnleider]

I'm closing this issue as I'm weary of the consequences of making a change like this on the v2 branch. v3 skeleton loader takes a different approach and I suggest reviewing its capabilities for suggesting changes. It will release tomorrow into Vuetify labs.

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