# Style override - some Vue elements not visible in DB2

**URL:** <https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 February 2024 18:46 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936 "2024-02-26T18:46:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [26 February 2024 18:46 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/1 "2024-02-26T18:46:50Z")

</div>

@hotNipi helped me to create a style change as the `v-menu` was using the wrong background color. I found two similar case, but I can't really figure out myself how to create a style to fix the colors properly:

Case 1: icons in `v-btn` in the `v-toolbar` appear white and not visible. Check this example in DB2: [Button component — Vuetify](https://vuetifyjs.com/en/components/buttons/#inside-of-bars)  
I fixed this by adding `color="black"` for each `v-btn` in the template node.

Case 2: column headers in the `v-data-table` disappear when on hover. This only works if the column is enabled for sorting, but that is the default behaviour.  
Check out this simple example:

```auto
<template>
  <v-data-table :items="items"></v-data-table>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                items : [
                    {
                    name: 'African Elephant',
                    species: 'Loxodonta africana',
                    diet: 'Herbivore',
                    habitat: 'Savanna, Forests',
                    }
                    // ... more items
                    ]
            }
        }
    }
</script>

```

---

<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:** [26 February 2024 20:30 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/2 "2024-02-26T20:30:31Z")

</div>

Tried briefly. Nothing to report. It may take to have same setup and CSS you have and maybe some custom styles affect cos not targeted properly so yeah... Not easy to say anything.

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [26 February 2024 20:33 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/3 "2024-02-26T20:33:44Z")

</div>

Interesting. I am not really using anything custom. I copied the LED gauge examples from the main DB2 discussion. I think that has a few special styles. Let me delete those and try again

---

<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:** [26 February 2024 20:52 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/4 "2024-02-26T20:52:40Z")

</div>

v-toolbar

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

Do you see same or similar?

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [26 February 2024 21:10 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/5 "2024-02-26T21:10:16Z")

</div>

Yes, the same. Looks better in black 🙂

---

<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:** [26 February 2024 21:19 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/6 "2024-02-26T21:19:27Z")

</div>

Problem is that not all root variables are handled to have colors to stand out. I'd call it a bug. But it's kind of Royal size.  
See that v-toolbar uses `--v-theme-on-surface-variant: 238,238,238;` for background.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/8843ed2243bfc1d46bf68b532ecfc556e86f6388.png)  
If you change dashboard group background colors this is not changed. Thus it can't be visible in every condition.

Such things will happen if root variables not adjusted as theme but one by one. That bug should be reported but as dashboard doesn't provide all possible vuetify elements - who knows what to test against what kind of widget --- well, currently it's a mess.  
**61** colors to manage ...

Of course you can override those for now.

```auto
.v-toolbar{
background: ...
color: ...
}

```

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [26 February 2024 21:39 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/7 "2024-02-26T21:39:14Z")

</div>

As you said there always be some like this. There are too many Vuetify components to handle all of them.

When I tried to figure this out, I was looking at the button, not the toolbar and I did not realize the toolbar needed change.

```auto
<style>
    .v-toolbar{
        color: black
    }
</style>

```

I was ok with the background color, but which this at least I don't need to add the color to each button to be visible.

---

<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:** [26 February 2024 21:44 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/8 "2024-02-26T21:44:37Z")

</div>

`color: black`

And if you ever decide to have consistent text color all over the dashboard, and it will be something else than black - this is a thing to adjust.  
But good enough for experimental state or so..

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [26 February 2024 21:57 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/9 "2024-02-26T21:57:47Z")

</div>

You mean create a variable for this color and specify it on a UI scoped template node, right?

---

<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:** [11 March 2024 21:58 UTC](https://discourse.nodered.org/t/style-override-some-vue-elements-not-visible-in-db2/85936/10 "2024-03-11T21:58:44Z")

</div>

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