# Dashboard 2 layout different between playground and node red

**URL:** <https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [12 May 2024 00:29 UTC](https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881 "2024-05-12T00:29:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [12 May 2024 00:29 UTC](https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881/1 "2024-05-12T00:29:26Z")

</div>

trying (still) to make the transition to dashboard 2, found a vue playground and doing different layouts. That's when the world fell apart. I get one layout in the playground and a different one in node red using the same code copied and pasted between the two.  
 ![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/3254656559fa4c8889864b654b2e08be04eef363.jpeg)

![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/2521fe17b14195ef9f509694f62fe8779865a3c5.jpeg)

```auto
<template>
    <v-container>
        <v-col style="height: 150px; width: 300px; background-color: grey">
            <v-row style="height: 150px; width: 300px">
                <v-btn class="OneButton" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
                </v-btn>
            </v-row>
        </v-col>

        <v-col style="height: 25px; width: 300px; background-color: grey">
            <v-row style="height: 25px; width: 300px">
                <v-btn class="a1" stacked @click="Power_Off">Test</v-btn>

                <v-btn class="a1" stacked @click="Power_Off">Next</v-btn>

                <v-btn class="a1" stacked @click="Power_Off">Text</v-btn>
            </v-row>
        </v-col>
        <v-col style="height: 110px; width: 300px; background-color: grey">
            <v-row style="height: 100px; width: 300px">
                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
                </v-btn>

                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon2">{{icon2}}</v-icon>
                </v-btn>

                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon3">{{icon3}}</v-icon>
                </v-btn>
            </v-row>
        </v-col>
    </v-container>
</template>
<style>
    .OneButton {
        background-color: black;
        height: 80% !important;
        width: 90% !important;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 12px;
        margin-right: 12px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .TwoButton {
        background-color: black;
        height: 85% !important;
        width: 75px !important;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 4px;
        margin-right: 4px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .ThreeButton {
        background-color: black;
        height: 80% !important;
        width: 75px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        font-size: 60px;
        color: #d7dbdd;
    }

    .a1 {
        background-color: black;
        height: 25px !important;
        width: 90px !important;
        margin-bottom: 1px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 16px;
        color: white;
        padding-bottom: 4px;
        border-bottom: 2px solid #dd7f00;
    }

    .a2 {
        background-color: black;
        height: 100% !important;
        width: 90px !important;
        margin-top: 4px;
        margin-bottom: 2px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .iconBasic {
        font-size: 45px;
    }

    .container {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: #303030;
    }

    .centerme {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 4px;
    }

    .roundme {
        border: 2px solid black;
        border-radius: 8px;
        background-color: #222222;
        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
        background: rgb(5, 5, 5);
        background: linear-gradient(135deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(42, 42, 42, 1) 100%);
        margin: 3px;
    }

    .roundme2 {
        border: 2px solid black;
        border-radius: 8px;
        background-color: #222222;
        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
        background: rgb(5, 5, 5);
        margin: 3px;
    }

    .blank {
        border: #303030;
        border-radius: 8px;
        background-color: #303030;
        box-shadow: inset 2px 2px 3px 4px #303030;
        background: #303030;
        background: linear-gradient(135deg, #303030 0%, #303030);
        margin: 3px;
    }

    .b1 {
        color: #6689a1;
        height: 25px;
        margin-bottom: 1px;
        font-size: 16px;
        padding-bottom: 4px;
        border-bottom: 2px solid #dd7f00;
    }

    .b2 {
        height: 100%;
        margin-top: 1px;
        font-size: 28px;
        color: #d7dbdd;
    }

    .gradient-2 {
        background: linear-gradient(135deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(42, 42, 42, 1) 100%) padding-box,
            linear-gradient(to right, #f16f0f, #f43700) border-box;
        margin-top: 14px;
        border-radius: 20px;
        border: 6px solid transparent;
    }

    .red_color {
        color: #ff0000;
    }

    .grey_color {
        color: #444444;
    }

    .green_color {
        color: #008000;
    }

    .blue_color {
        color: #00daf4;
    }

    .otstatus {
        padding-left: 6px;
        padding-top: 2px;
        font-size: 14px;
    }

    @keyframes fire {
        from {
            color: #ff5b33;
        }

        50% {
            color: #ffac33;
        }

        to {
            color: #ff5b33;
        }
    }

    .on_fire {
        animation-name: fire;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }

    @keyframes water {
        from {
            color: #add8e6;
        }

        50% {
            color: #0000cd;
        }

        to {
            color: #add8e6;
        }
    }

    .on_water {
        animation-name: water;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }
</style>
<script>
    export default {
    data() {
      return {
        value: 'OFF',
        icon1: 'mdi-bed',
        icon2: 'mdi-cog',
        icon3: 'mdi-album',
      }
    },

    watch: {
      msg: {
        deep: true,
        handler(newVal) {
          if (newVal.payload === 'start') {
            this.Power_On()
          }
          if (newVal.payload === 'stop') {
            this.Power_Off()
          }
          if (newVal.payload === 'next') {
            this.Power_Next()
          }
        },
      },
    },

    methods: {
      Power_Off: function () {
        this.icon1 = 'mdi-cog'
        this.$refs.icon1.$el.style.color = 'green'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'grey'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'grey'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'Off' })
      },

      Power_On: function () {
        this.icon1 = 'mdi-bed'
        this.$refs.icon1.$el.style.color = 'grey'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'green'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'grey'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'On' })
      },

      Power_Next: function () {
        this.$refs.icon1.$el.style.color = 'grey'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'grey'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'green'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'Next' })
      },
    },
  }
</script>

```

is there any logical explanation or is the universe just stacked against me?  
Thanks  
[edit] top is the playground image, bottom is the node red image  
[edit 2] url of playground [https://play.vuetifyjs.com/](https://play.vuetifyjs.com/)

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [12 May 2024 09:21 UTC](https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881/2 "2024-05-12T09:21:59Z")

</div>

Well, apparently in NodeRed there is a css class `.v-btn--stacked.v-btn--size-default` that is forcing the `--v-btn-height=72px`, if unsing the `inspect` we change that to `25px` it seems ok.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/497dee09ad39562c1089698638c92534e552491c.png)

I do not understand css very well, but adding that directive `--v-btn-height: 25px !important;` to the `a1` style class seems to solve. Most likelly will have other consequences.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [12 May 2024 12:41 UTC](https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881/3 "2024-05-12T12:41:37Z")

</div>

Two things, first adding that does indeed fix the page. Second I changed from btn to card which also fixes it. I really didn't need that to be a btn that was left over from 10,000 attempts before.  
Thanks, and I will hang on to your suggestion for future possibilities. You pointing that out helped a lot.

---

<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:** [26 May 2024 12:42 UTC](https://discourse.nodered.org/t/dashboard-2-layout-different-between-playground-and-node-red/87881/4 "2024-05-26T12:42:27Z")

</div>

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