I am new to html,css and javascript programming (only did some c- or c++ programming).
I try to make some tests with an ui template that I want to use to control shutters.
I want to reduce the height of the vertical slider,
but activating the height settings in the css part does only reduce the size of the complete group,
the slider inside is cut off.
Maybe someone can help.
Thanks
<template>
<v-container
class="bg-surface-variant"
>
<v-row no-gutters>
<v-col>
<v-text class="ma-2 pa-2">shutter living room</v-text>
</v-col>
</v-row>
<v-row align="center" align-content="space-between">
<v-col>
<v-container
>
<v-row>
<v-btn class="button-item" @click="open()">open</v-btn>
</v-row>
<v-row>
<v-btn class="button-item" @click="stop()">stop</v-btn>
</v-row>
<v-row>
<v-btn class="button-item" @click="close()">close</v-btn>
</v-row>
</v-container>
</v-col>
<v-col no-gutters>
<v-slider
class="shutter-item"
direction="vertical"
track-size=125
track-color="blue-grey"
track-fill-color="yellow"
thumb-label="always"
v-model=value
min=0
max=100
@end="sendValue(value)"
> </v-slider>
</v-col>
</v-row>
</v-container>
</template>
<!-- label="Balkon" -->
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
/* return {
count: 0
}*/
},
watch: {
// watch for any changes of "count"
/* count: function () {
this.send({payload: 'Multiple of 5'})
}*/
},
methods: {
// expose a method to our <template> and Vue Application
sendValue: function (val) {
//this.count++
this.send({payload: 'Multiple of 5'})
this.send({payload: val/100})
},
open: function () {
this.send({payload: 'open'})
},
stop: function () {
this.send({payload: 'stop'})
},
close: function () {
this.send({payload: 'close'})
}
},
}
</script>
<style>
.shutter-item {
height: 100px; /* does not work as expected ! */
}
.button-item {
width:75px;
rounded:true;
margin-top: 10px;
/*padding: 10px;
padding-top: 10px;
padding-bottom: 10px;*/
/* height:150px*/
}
/* define any styles here - supports raw CSS */
.my-class {
color: red;
}
</style>
it does not make any difference if I append your proposal or not,
I want to reduce the height of the vertical slider to be equal to the height of the three
buttons left of it, it's simply too big.
Must admit, the v-slider is quite of tricky to override.
I changed your container elements to bare divs just to get rid of crazy space and position alignements.
(that's just insane when one adds negative margins and the other removes it)
Anyway - I hope this is maybe going in direction you have described.