CSS to set currently selected tab on v2 tab layout

Dashboard
1

Apologies if this has been asked. Has anyone worked out how to apply a custom CSS to show the currently selected tab in a v2 tab layout? Currently there is no way to no what tab your on.

v2_tabs
v2_tabs1232Ă—442 19.9 KB

2

The ui-control node sends a payload with the tab name when you switch tabs (msg.name). I use that to trigger different flows for each page.

image
image870Ă—672 26.7 KB

3

That is not correct and you can see that in your screenshot. The current tab is highlighted, the underlying HTML looks like this:

<a data-v-dd700828="" class="v-list-item v-list-item--active v-list-item--link v-list-item--nav v-theme--nrdb v-list-item--density-default v-list-item--one-line v-list-item--rounded v-list-item--variant-text" tabindex="-2" href="/nr/dashboard/p1" aria-current="page" data-nav="a6c08cd025d0c2bd"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span><div class="v-list-item__prepend"><!----><i class="mdi-home mdi v-icon notranslate v-theme--nrdb v-icon--size-default" aria-hidden="true" density="default"></i><div class="v-list-item__spacer"></div></div><div class="v-list-item__content" data-no-activator=""><div class="v-list-item-title">P1 (/p1)</div><!----><!----></div><div class="v-list-item__append"><!----><div class="v-list-item__spacer"></div></div></a>

Urm, yes, not terribly helpful! :slight_smile:
The key class seems to be v-list-item--active - so you perhaps simply need to override that if you want to customise the look?

4

The current tab should have a dark line at the bottom. No idea when this was introduced.

image
image466Ă—242 5.19 KB

Anyway this seems to work

.v-tab-item--selected {
    background-color: hsl(0, 61.5%, 94.9%);
    border: 2px solid pink;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none;
}

image
image420Ă—278 6.37 KB

5

Ah, I was looking at the wrong "tabs" :slight_smile:

<button data-v-5f213885="" type="button" class="v-btn v-tab-item--selected v-tab--selected v-theme--nrdb v-btn--density-default v-btn--size-default v-btn--variant-text v-tab" tabindex="0" role="tab" aria-selected="true" value="a9c7595384727d2e"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator="">P2G1<div class="v-tab__slider"></div></span><!----><!----></button>

There seem to be 2 possible CSS classes then: v-tab-item--selected and v-tab--selected.

6

Thanks to you both for taking the time look at this ..
@TotallyInformation I can see why I missed that my zoom was 90% !!
@jbudd that works a treat.

1 Like
7

That’s a bug, not a feature. I’ll take a look