# DB2 vue separate component

**URL:** https://discourse.nodered.org/t/db2-vue-separate-component/92186
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [5 October 2024 17:53 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186 "2024-10-05T17:53:01Z")
**Posts on this page:** 12
**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: [5 October 2024 17:53 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/1 "2024-10-05T17:53:01Z")

</div>

Working on migrating to DB2 and this is a long slog. I have a basic 3X3 grid with seven buttons and although I am somewhat happy with this there was a issue trying to get the buttons to indicate pushed. When I push one on one row it deselects a button on the next row. So I stuffed the code into chat gpt and it spit out a new file and then wanted me to create a buttoncard component. Is this something that node red supports? Just for giggles I have attached my code.

```auto
<template>
  <v-container>
  
    <v-col style="height: 25px; width: 300px; background-color: black">
      <v-row>
        <v-card class="containerTop">Timer 1</v-card>
        <v-card class="containerTop"></v-card>
        <v-card class="containerTop">Reset</v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn1">Timer1</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn2"></v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn3" :class="{ 'active': clicked === 3 }">Reset</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn4" :class="{ 'active': clicked === 4 }">Rnd</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn5" :class="{ 'active': clicked === 5 }">On</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn6" :class="{ 'active': clicked === 6 }">Off</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn7" :class="{ 'active': clicked === 7 }">24 Hr</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn8"></v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn9" :class="{ 'active': clicked === 9 }">Nite</v-btn>
        </v-card>
      </v-row>
    </v-col>
    
  </v-container>
</template>

<script>
  export default {
  data() {
    return {
      buttonText1: 'Timer1', // Initial button text
      buttonText2: '', // Initial button text
      buttonText3: 'Reset', // Initial button text
      clicked: 1, // Initial clicked state
    };
  },
  methods: {
    btn1() {
      this.clicked = 1;
    },
    btn2() {
    },
    btn3() {
      this.clicked = 3;
      this.send({ payload: "reset" }); // Example: Replace with your MQTT message send logic
    },
    btn4() {
    this.clicked = 4;
    this.send({ payload: "rnd" }); // Example: Replace with your MQTT message send logic
    },
    btn5() {
    this.clicked = 5;
    this.send({ payload: "on" }); // Example: Replace with your MQTT message send logic
    },
    btn6() {
    this.clicked = 6;
    this.send({ payload: "off" }); // Example: Replace with your MQTT message send logic
    },
    btn7() {
    this.clicked = 7;
    this.send({ payload: "24hr" }); // Example: Replace with your MQTT message send logic
    },
    btn8() {
    },
    btn9() {
    this.clicked = 9;
    this.send({ payload: "nite" }); // Example: Replace with your MQTT message send logic
    },
  },
  watch: {
    msg: {
      deep: true,
      handler(newVal) {
        if (newVal.payload === 1) {
          this.clicked = 1;
          this.buttonText1 = 'Timer1';
          this.buttonText2 = '';
          this.buttonText3 = 'Reset';
        } else if (newVal.payload === 2) {
          this.clicked = 2;
          this.buttonText1 = 'Timer1';
          this.buttonText2 = '';
          this.buttonText3 = 'Reset';
        } else if (newVal.payload === 3) {
          this.clicked = 3;
          this.buttonText1 = 'Timer1';
          this.buttonText2 = '';
          this.buttonText3 = 'Reset';
        }
      },
    },
  },
  created() {
    // Example: Fetch initial data from an API or subscribe to MQTT topics
    // this.$mqtt.subscribe('topic1');
    // this.$mqtt.subscribe('topic2');
    // this.$mqtt.subscribe('topic3');
  },
};
</script>

<style scoped>
  .containerTop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 25px; /* Adjust height as needed */
    background-color: black;
    color: white;
    font-size: 12px;
    text-align: center;
    border-bottom: 2px solid #dd7f00;
    border-top: 3px solid #6689a1;
    border-left: 3px solid #6689a1;
    border-right: 3px solid #6689a1;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 80px; /* Adjust height as needed */
    background-color: black;
    border-bottom: 3px solid #6689a1;
    border-left: 3px solid #6689a1;
    border-right: 3px solid #6689a1;
  }

  .box {
    width: 25px; /* Adjust box width as needed */
    height: 80px; /* Adjust box height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .centered-button {
    padding: 10px 20px;
    color: white;
    font-size: 16px;

    cursor: pointer;
  }

  button {
    display: flex;
    width: 75px;
    padding-top: 2px;
    border-top: 5px;
    background-color: grey; /* Default background color */
    color: white;
    font-size: 12px;
    border: none;
    cursor: pointer;
  }

  .active {
    background-color: green; /* Changed background color when active */
  }

  .a1 {
    background-color: black;
    justify-content: center;
    text-align: center;
    height: 25px !important;
    width: 140px !important;
    margin-top: 5px;
    margin-bottom: 1px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    color: #6689a1;
    padding-bottom: 4px;
    border-bottom: 2px solid #dd7f00;
    border-top: 2px solid #6689a1;
    border-left: 2px solid #6689a1;
    border-right: 2px solid #6689a1;
  }

  .a2 {
    background-color: grey;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px !important;
    width: 100px !important;
    margin-top: 1px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    color: #6689a1;
    padding-bottom: 2px;
    border-bottom: 2px solid #6689a1;
    border-top: 2px solid #6689a1;
    border-left: 2px solid #6689a1;
    border-right: 2px solid #6689a1;
  }
</style>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [5 October 2024 18:00 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/2 "2024-10-05T18:00:46Z")

</div>

> [@gerry](#):
>
> Is this something that node red supports

Node red? Or dashboard 2?

And what are you asking really? What part are you asking is supported? Did you try this code in a ui-template? At first glance it looks like it would work (very quick glance)

---

<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: [5 October 2024 18:16 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/3 "2024-10-05T18:16:12Z")

</div>

So yes it does work... sort of. When I click on a button in row 2 that button turns green. It should stay green unless I push another button in row 2. But if I push a button in row 3 then it turns off the button in row 2 and only high lights the button in row 3. Does that make sense?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [5 October 2024 18:17 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/4 "2024-10-05T18:17:43Z")

</div>

Did you try the built in button group? [Button ui-button-group | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-button-group.html#examples)

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [5 October 2024 18:19 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/5 "2024-10-05T18:19:41Z")

</div>

One button group per row maybe?

---

<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: [5 October 2024 18:22 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/6 "2024-10-05T18:22:33Z")

</div>

yes, but what occurs is that I need three button groups to get the same functionality. Then when I put them on the dashboard there is a gap between the button groups. I am trying to get all the buttons stacked closer together, visually. Can't seem to accomplish that with the individual button groups. Then it became a man vs. machine to try to do it in a template and the machine is winning. This is more of making it look like what I want than doing it the easy way.  
[edit]  
I have a good working dashboard on my existing installation, and I like the way it looks. It's now trying to duplicate my existing stuff in DB2 and make it look the same. I'm in no hurry to update and that's a good thing as this is taking forever but I want to take the time and do it like I want rather than just slap something together. .

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [5 October 2024 18:41 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/7 "2024-10-05T18:41:05Z")

</div>

You can adjust the "Widget Gap" in the theme settings for any single dashboard page.  
For example this is 2px and the three button groups are pretty close together.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/066873ed71c51cff94a076dd6a085d9a556a54e3.png)  
It affects all widgets on that page.

It looks like you'll need some CSS jiggery-pokery to make all the buttons the same _width_.

Edit: Grr there's no "class" field in the button group config!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [5 October 2024 19:06 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/8 "2024-10-05T19:06:30Z")

</div>

> [@jbudd](#):
>
> Grr there's no "class" field in the button group config!

Clearly an oversight. If you raise an issue we'll get it added.

---

<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: [5 October 2024 19:16 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/9 "2024-10-05T19:16:15Z")

</div>

glad to be of help,

---

<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: [5 October 2024 20:15 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/10 "2024-10-05T20:15:06Z")

</div>

here's my final button group

```auto
<template>
  <v-container>

    <!-- Row 1: Timer number and reset -->
    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded >Timer 1</v-btn>
        </v-card>
        
        <v-card class="container">
          
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btnReset('reset')" :class="{ 'active': isActive['reset'] }">Reset</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <!-- Row 2: rnd on off -->
    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btnRnd('rnd')" :class="{ 'active': isActive['rnd'] }">Rnd</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btnOn('on')" :class="{ 'active': isActive['on'] }">On</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btnOff('off')" :class="{ 'active': isActive['off'] }">Off</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <!-- Row 3: 24hr nite -->
    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn24hr('24hr')" :class="{ 'active': isActive['24hr'] }">24Hr
          </v-btn>
        </v-card>
        <v-card class="container">

        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btnNite('nite')" :class="{ 'active': isActive['nite'] }">Nite
          </v-btn>
        </v-card>
      </v-row>
    </v-col>

  </v-container>
</template>

<script>
export default {
  data() {
    return {
      isActive: {

      },
      buttonText: {

      }
    };
  },

  watch: {
    msg: {
    deep: true,
    handler(newVal) {
      if (newVal.topic === 'Rnd' && newVal.payload === true) {
        this.isActive['rnd'] = true;
        this.isActive['on'] = false;
        this.isActive['off'] = false;		
      }
      if (newVal.topic === 'On' && newVal.payload === true) {
        this.isActive['rnd'] = false;
        this.isActive['on'] = true;
        this.isActive['off'] = false;		
      }
      if (newVal.topic === 'Off' && newVal.payload === true) {
        this.isActive['rnd'] = false;
        this.isActive['on'] = false;
        this.isActive['off'] = true;		
      }
      if (newVal.topic === '24hr' && newVal.payload === true) {
      this.isActive['24hr'] = true;
      this.isActive['nite'] = false;
      }
      if (newVal.topic === 'Nite' && newVal.payload === true) {
      this.isActive['24hr'] = false;
      this.isActive['nite'] = true;
      }
    },
    },
  },

  methods: {
     btnReset() {
      this.send({ payload: "reset" }); 
    },
     btnRnd() {
      this.send({ payload: "rnd" }); 
      this.isActive['rnd'] = true;
      this.isActive['on'] = false;
      this.isActive['off'] = false;
    },
     btnOn() {
      this.send({ payload: "on" });
      this.isActive['rnd'] = false;
      this.isActive['on'] = true;
      this.isActive['off'] = false;	  
    },
     btnOff() {
      this.send({ payload: "off" });
      this.isActive['rnd'] = false;
      this.isActive['on'] = false;
      this.isActive['off'] = true;	  
    },
     btn24hr() {
      this.send({ payload: "24hr" });
      this.isActive['24hr'] = true;
      this.isActive['nite'] = false;  
    },
     btnNite() {
      this.send({ payload: "nite" });
      this.isActive['24hr'] = false;
      this.isActive['nite'] = true;  
    },
  },
};
</script>

<style scoped>

.containerTop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 25px; /* Adjust height as needed */
  background-color: black;
  color: white;
  font-size: 12px;
  text-align: center;
  border-bottom: 2px solid #dd7f00;
  border-top: 3px solid #6689a1;
  border-left: 3px solid #6689a1;
  border-right: 3px solid #6689a1;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 80px; /* Adjust height as needed */
  background-color: black;
  border-top: 3px solid #6689a1;
  border-bottom: 3px solid #6689a1;
  border-left: 3px solid #6689a1;
  border-right: 3px solid #6689a1;
}

.box {
  width: 25px; /* Adjust box width as needed */
  height: 80px; /* Adjust box height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered-button {
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.button {
  display: flex;
  width: 75px;
  padding-top: 2px;
  border-top: 5px;
  background-color: grey; /* Default background color */
  color: white;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.active {
  background-color: green; /* Changed background color when active */
}

.a1 {
  background-color: black;
  justify-content: center;
  text-align: center;
  height: 25px !important;
  width: 140px !important;
  margin-top: 5px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 16px;
  color: #6689a1;
  padding-bottom: 4px;
  border-bottom: 2px solid #dd7f00;
  border-top: 2px solid #6689a1;
  border-left: 2px solid #6689a1;
  border-right: 2px solid #6689a1;
}

.a2 {
  background-color: grey;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50px !important;
  width: 100px !important;
  margin-top: 1px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 16px;
  color: #6689a1;
  padding-bottom: 2px;
  border-bottom: 2px solid #6689a1;
  border-top: 2px solid #6689a1;
  border-left: 2px solid #6689a1;
  border-right: 2px solid #6689a1;
}

</style>

```

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [5 October 2024 21:16 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/11 "2024-10-05T21:16:50Z")

</div>

I have modified the code you posted and it now does what I think you were after. It is a bit rough & ready and could be streamlined but it works

```auto
<template>
  <v-container>
  
    <v-col style="height: 25px; width: 300px; background-color: black">
      <v-row>
        <v-card class="containerTop">Timer 1</v-card>
        <v-card class="containerTop"></v-card>
        <v-card class="containerTop">Reset</v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn1">Timer1</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn2"></v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn3" :class="{ 'active': buttonGroup[0] == 3 }">Reset</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn4" :class="{ 'active': buttonGroup[1] === 1 }">Rnd</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn5" :class="{ 'active': buttonGroup[1] === 2 }">On</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn6" :class="{ 'active': buttonGroup[1] === 3 }">Off</v-btn>
        </v-card>
      </v-row>
    </v-col>

    <v-col style="height: 80px; width: 300px; background-color: black">
      <v-row>
        <v-card class="container">
          <v-btn rounded @click="btn7" :class="{ 'active': buttonGroup[2] === 1 }">24 Hr</v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn8"></v-btn>
        </v-card>
        <v-card class="container">
          <v-btn rounded @click="btn9" :class="{ 'active': buttonGroup[2] === 3 }">Nite</v-btn>
        </v-card>
      </v-row>
    </v-col>
    
  </v-container>

</template>

<script>
  export default {
   data: () => {
    return {
      buttonText1: 'Timer1', // Initial button text
      buttonText2: '', // Initial button text
      buttonText3: 'Reset', // Initial button text
      clicked: 1, // Initial clicked state
      buttonGroup: [1, 0, 0],
      
    }

  },

  methods: {
    btn1() {
      this.buttonGroup[0] = 1
    },

    btn2() {
    },

    btn3() {
      this.buttonGroup[0] = 3
      this.send({ payload: "reset" }); // Example: Replace with your MQTT message send logic
    },

    btn4() {
      this.buttonGroup[1] = 1
      this.send({ payload: "rnd" }); // Example: Replace with your MQTT message send logic
    },

    btn5() {
      this.buttonGroup[1] = 2
      this.send({ payload: "on" }); // Example: Replace with your MQTT message send logic
    },

    btn6() {
      this.buttonGroup[1] = 3
      this.send({ payload: "off" }); // Example: Replace with your MQTT message send logic
    },

    btn7() {
      this.buttonGroup[2] = 1
      this.send({ payload: "24hr" }); // Example: Replace with your MQTT message send logic
    },

    btn8() {
    },

    btn9() {
      this.buttonGroup[2] = 3
      this.send({ payload: "nite" }); // Example: Replace with your MQTT message send logic
    },
    
  },

  watch: {
    msg: {
      deep: true,
      handler(newVal) {
        if (newVal.payload === 1) {
          this.buttonGroup[0] = 1
          this.buttonText1 = 'Timer1'
          this.buttonText2 = ''
          this.buttonText3 = 'Reset'

        } else if (newVal.payload === 2) {
          this.buttonGroup[0] = 2
          this.buttonText1 = 'Timer1'
          this.buttonText2 = ''
          this.buttonText3 = 'Reset'

        } else if (newVal.payload === 3) {
          this.buttonGroup[0] = 3
          this.buttonText1 = 'Timer1'
          this.buttonText2 = ''
          this.buttonText3 = 'Reset'

        }
        
      },

    },

  },

  mounted() {
    // Example: Fetch initial data from an API or subscribe to MQTT topics
    // this.$mqtt.subscribe('topic1');
    // this.$mqtt.subscribe('topic2');
    // this.$mqtt.subscribe('topic3');
  },

}

</script>

<style scoped>
  .containerTop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 25px; /* Adjust height as needed */
    background-color: black;
    color: white;
    font-size: 12px;
    text-align: center;
    border-bottom: 2px solid #dd7f00;
    border-top: 3px solid #6689a1;
    border-left: 3px solid #6689a1;
    border-right: 3px solid #6689a1;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 80px; /* Adjust height as needed */
    background-color: black;
    border-bottom: 3px solid #6689a1;
    border-left: 3px solid #6689a1;
    border-right: 3px solid #6689a1;
  }

  .box {
    width: 25px; /* Adjust box width as needed */
    height: 80px; /* Adjust box height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .centered-button {
    padding: 10px 20px;
    color: white;
    font-size: 16px;

    cursor: pointer;
  }

  button {
    display: flex;
    width: 75px;
    padding-top: 2px;
    border-top: 5px;
    background-color: grey; /* Default background color */
    color: white;
    font-size: 12px;
    border: none;
    cursor: pointer;
  }

  .active {
    background-color: green; /* Changed background color when active */
  }

  .a1 {
    background-color: black;
    justify-content: center;
    text-align: center;
    height: 25px !important;
    width: 140px !important;
    margin-top: 5px;
    margin-bottom: 1px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    color: #6689a1;
    padding-bottom: 4px;
    border-bottom: 2px solid #dd7f00;
    border-top: 2px solid #6689a1;
    border-left: 2px solid #6689a1;
    border-right: 2px solid #6689a1;
  }

  .a2 {
    background-color: grey;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px !important;
    width: 100px !important;
    margin-top: 1px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    color: #6689a1;
    padding-bottom: 2px;
    border-bottom: 2px solid #6689a1;
    border-top: 2px solid #6689a1;
    border-left: 2px solid #6689a1;
    border-right: 2px solid #6689a1;
  }
</style>

```

---

<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: [19 October 2024 21:17 UTC](https://discourse.nodered.org/t/db2-vue-separate-component/92186/12 "2024-10-19T21:17:01Z")

</div>

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