Dashboard 2 template vertical slider height

[RedTom]

 Hi,

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>
    

'

[hotNipi]

Welcome to forum

Add class to outer container

And in styles add one rule

Now it grows to fit into its container but not taller.

[RedTom]

Hi,

thanks,

but does not work as expected,

page layout is GRID
group size is set to 3x1

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.

<template>
    
    <v-container
      class="bg-surface-variant my-component-container"
    >
    <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>

<script>
    export default {
        data() {
        },
         watch: {
        },
         methods: {
            // expose a method to our <template> and Vue Application
            sendValue: function (val) {
                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>
    .my-component-container v.slider.v-input--vertical>.v-input__control {
        min-height:unset;
        grid-row-end:6
    }

    .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*/
    }
</style>
    

[hotNipi]

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.

<template>
    <div class="shutter-container">
        <header>shutter living room</header>           
        <div class="shutter-controls">
            <div class="shutter-buttons">
                <v-btn class="button-item" @click="open()">open</v-btn>
                <v-btn class="button-item" @click="stop()">stop</v-btn>
                <v-btn class="button-item" @click="close()">close</v-btn>   
            </div>           
            <div>
                <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>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
          
        },
         watch: {
           
        },
         methods: {
            sendValue: function (val) {               
                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-container{
        display:grid;
        grid-template-rows:2rem 1fr;
    }
    .shutter-container .shutter-controls{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .shutter-container .shutter-buttons {
        display: grid;
        align-items: center;
        align-content: space-between;
    }
    .shutter-container .v-slider.v-input--vertical {        
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 1rem;
    }
    .shutter-container .v-slider.v-input--vertical>.v-input__control {
        /* this drives whole component height*/
        min-height: 128px;
    }
    .shutter-container .v-input__details{
        grid-area:unset;
    }
    .shutter-container .v-input--vertical{
        grid-template-rows:0;
    }
</style>

[RedTom]

Hi,

thanks a lot, that looks pretty good !

However I must say, it's difficult for me to understand.
But that can be approved in the future.

I need this control multiple times and changing something should not be too much work.
I tried this with ui-controls in subflows, but had no success.

Best regards

[hotNipi]

Subflows and dashboard were never be supported to work together. Don't know about Dashboard 2.0 but I'm afraid it is still the same.

[joepavitt]

There is a beautiful piece of work from @Steve-Mcl for core that'll enable support for this: Better Environment Variable workflow · node-red/designs · Discussion #77 · GitHub