# Dashboard 2 template vertical slider height

**URL:** <https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [5 February 2024 22:08 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233 "2024-02-05T22:08:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [5 February 2024 22:08 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/1 "2024-02-05T22:08:44Z")

</div>

```
 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

```auto
<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>
    

```

![alt text]()  
 ![alt text]()  
'

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 February 2024 22:31 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/2 "2024-02-05T22:31:46Z")

</div>

Welcome to forum

Add class to outer container

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/59b3ef6c9fdda40386a66a85a5628cb9ea7131b3.png)

And in styles add one rule

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c543f1a0a475b1eba6525dd664f018591b538152.png)

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

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [6 February 2024 00:06 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/3 "2024-02-06T00:06:02Z")

</div>

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.

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e40e0d8473b6016df93f88428a5a447340ad254e.png)

```auto
<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>
    

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 February 2024 14:41 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/4 "2024-02-06T14:41:47Z")

</div>

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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b699b99dc9c1156efcbd73aeece86d8b484cdf9.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [6 February 2024 17:57 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/5 "2024-02-06T17:57:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 February 2024 18:02 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/6 "2024-02-06T18:02:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [8 February 2024 11:34 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/7 "2024-02-08T11:34:22Z")

</div>

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](https://github.com/node-red/designs/discussions/77#discussioncomment-7580316)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 March 2024 11:35 UTC](https://discourse.nodered.org/t/dashboard-2-template-vertical-slider-height/85233/8 "2024-03-09T11:35:09Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.