Issue
I am trying to set a specific height for a vertical slider in vuetify2. I tried that via height="800px" and style="height:800px" but without the intended effect.
The box of my grid gets extended but the height of the slider does not change.
I use
<v-container fluid>
<v-row>
...
<v-col lg="2">
<v-card class="pa-1" outlined tile>
<v-slider min="1" max="180" v-model="angle" @input="setAngle" vertical style="height:800px"/>
</v-card>
</v-col>
</v-row>
...
</v-container>
and get the result in the screenshot - i.e. height does not change
Solutions anyone or is that maybe due to version 2.0.x of vuetify 2?
Solution
Unfortunately there is currently no shortcut prop to set the height of a v-slider
.
However you can still use css to adjust the height of the slider, like the vertical slider documentation recommends.
This should do the trick: CodePen
HTML
<v-slider min="1" max="180" vertical class="large-slider" prepend-icon="mdi-axis-y-rotate-clockwise"/>
CSS
.large-slider .v-slider {
height: 800px;
}
If you're using Single File Components with scoped styles, you need to use vue's deep selectors for this to work:
<style scoped>
.large-slider >>> .v-slider {
height: 800px;
}
</style>
Answered By - Turtlefight
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.