Strange selective styling behavior by dcc.Tabs

Dash Python
1

Hello! For some reason only a couple of the tabs in my dcc.Tabs compoent get my custom tab style. I will explain what I mean in a moment but first let me show you the code and what the results looks like.

The tabs are defined like this:

html.Div(
        [
            dcc.Tabs(children=
                [
                    dcc.Tab(id='config-tab', label="Config", value='config', className='custom-tab', selected_className='custom-tab--selected'),
                    dcc.Tab(id='dash-tab', label='Live', value='dash', className='custom-tab', selected_className='custom-tab--selected'),
                    dcc.Tab(id='system-tab',label='System Status', value='system', className='custom-tab', selected_className='custom-tab--selected')
                ], id="page-select", className='custom-tabs', value='dash'),
            html.Br(),
            html.Div(id='tab-content'),

And the resulting page looks like this:

Wierd_Tabs
Wierd_Tabs1809×124 3.78 KB

As you can see the system-tab has the default dash tab style, while the other two have my custom style. Now if I exchange the id of system-tab with the one of the other two, say dash-tab then the style applies.

Weird_Tab1
Weird_Tab11796×100 3.3 KB

So it is only applying styles to those two id’s config-tab and dash-tab! I’ve tried rearranging the order of the tabs in the code, as well and that did nothing.

What seems to be happening is only the dcc.Tab components with the ids config-tab and dash-tag are receiving the custom styling.

I changed the code to this:

dcc.Tabs(children=
                [
                    dcc.Tab(id='Weird_TAG1', label="Config", value='config', className='custom-tab', selected_className='custom-tab--selected'),
                    dcc.Tab(id='Weird_TAG2', label='Live', value='dash', className='custom-tab', selected_className='custom-tab--selected'),
                    dcc.Tab(id='system-tab',label='System Status', value='system', className='custom-tab', selected_className='custom-tab--selected')
                ], id="page-select", className='custom-tabs', value='dash'),

Changing config-tab and dash-tab to Weird_TAG1 and Weird_TAG2 respectively, but the result is this, but still specifying style.

And it looks like this:

Strange_Tabs
Strange_Tabs1785×132 4.36 KB

Now from what I understand, it shouldn’t matter what the id of the component is. I should be able to just specify a classname and a selected class name and the css should apply the style. But that is not what is happening here. In order for this style to be applied for some reason, the ids have to be a certain way.

I even had a coworker of mine run it on her machine, and it still exhibits the same behavior.

Also here is the css if anyone want to see that.

  .custom-tabs {
    background-color: #373737;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    height: fit-content;
    cursor: pointer;
  }

  #config-tab.custom-tab, #dash-tab.custom-tab{
    background-color: #373737;
    letter-spacing: 1px;
    color: inherit;
    border: 0;
    border-bottom: black solid 4px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 18px;
  }

  #config-tab.custom-tab--selected, #dash-tab.custom-tab--selected {
    border-bottom: #00a355 solid 4px !important;
  }

Does anyone know how I can prevent this so I can add more tabs with my style to this page?

2

Oh I see now! In the css I notice I specified those ids.custom-tab! Now I feel silly! But I’ll keep this up here in case anyone has a similar issue to me! Check your css!!!

1 Like