Trouble with dcc.tabs, dbc.tabs and vizro css

Hi,

I’m having an app with tabs.

A bit thoughtless I used Vizro css and when I had trouble with the dbc.Tabs (tabs with label selection not showing), I used dcc.Tabs.

But now, despite having added custom added to the tabs css I’m not able to interfere with the styling.

I have included a basic example of what I’m using to create the tabs. With a dcc.Tabs and dbc.Tabs.

What I really want is either using dbc.Tabs (looks good without additional styling) or dcc.Tabs and being able to remove all the styling and add something of my own (make the span a button and done)

Simplified code used

Summary
# -*- coding: utf-8 -*-
"""
Created on Sat Mar 15 08:40:40 2025

@author: win11
"""

from dash import Dash, html, dcc, ctx, Input, Output, State,  no_update,callback, clientside_callback, callback_context
from dash.dependencies import Input, Output, State, MATCH, ALL

import dash_bootstrap_components as dbc

# using the vizro theme
vizro_bootstrap = "https://cdn.jsdelivr.net/gh/mckinsey/vizro@main/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css?v=2"
dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
# if using the vizro theme
#app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME, dbc_css])

#colors used in some visuals like the barchart
#order = [default light blue, default light red, selected yellow, selected red, related yellow, related red]
    

tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 1!", className="card-text"),
            dbc.Button("Click here", color="success"),
        ]
    ),
    className="mt-3",
)

tab2_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 2!", className="card-text"),
            dbc.Button("Don't click here", color="danger"),
        ]
    ),
    className="mt-3",
)





app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME, vizro_bootstrap])


dbc_tabs = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="Tab 1", tab_id="tab-1"),
                dbc.Tab(label="Tab 2", tab_id="tab-2"),
            ],
            id="tabs",
            active_tab="tab-2",
        ),
        html.Div(id="content"),
    ]
)
app.layout = [
    
    #this is dbc tabs
    dbc_tabs,
    
    #and dcctabs
    
    html.Div([
    dcc.Tabs([
        dcc.Tab(label='Tab one', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [4, 1, 2],
                            'type': 'bar', 'name': 'SF'},
                        {'x': [1, 2, 3], 'y': [2, 4, 5],
                         'type': 'bar', 'name': 'Montréal'},
                    ]
                }
            )
        ]),
        dcc.Tab(label='Tab two', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [1, 4, 1],
                            'type': 'bar', 'name': 'SF'},
                        {'x': [1, 2, 3], 'y': [1, 2, 3],
                         'type': 'bar', 'name': 'Montréal'},
                    ]
                }
            )
        ]),
        dcc.Tab(label='Tab three', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [2, 4, 3],
                            'type': 'bar', 'name': 'SF'},
                        {'x': [1, 2, 3], 'y': [5, 4, 3],
                         'type': 'bar', 'name': 'Montréal'},
                    ]
                }
            )
        ]),
    ])
])
    
    
    
]


@app.callback(Output("content", "children"), [Input("tabs", "active_tab")])
def switch_tab(at):
    if at == "tab-1":
        return tab1_content
    elif at == "tab-2":
        return tab2_content
    return html.P("This shouldn't ever be displayed...")

# Run the app
if __name__ == "__main__":
    app.run(debug=True)

Package Version info is maybe important too. 

[details="Summary"]


Package                         Version
------------------------------- --------------
aiohappyeyeballs                2.4.4
aiohttp                         3.11.12
aiosignal                       1.3.2
alabaster                       1.0.0
annotated-types                 0.7.0
arrow                           1.3.0
astroid                         3.3.8
asttokens                       3.0.0
asyncssh                        2.19.0
atomicwrites                    1.4.1
attrs                           25.1.0
autoflake                       2.3.1
autopep8                        2.0.4
babel                           2.17.0
backports.tarfile               1.2.0
beautifulsoup4                  4.13.3
binaryornot                     0.4.4
black                           25.1.0
bleach                          6.2.0
blinker                         1.9.0
Brotli                          1.1.0
cachelib                        0.9.0
certifi                         2024.12.14
cffi                            1.17.1
chardet                         5.2.0
charset-normalizer              3.4.1
click                           8.1.8
cloudpickle                     3.1.1
colorama                        0.4.6
comm                            0.2.2
contourpy                       1.3.1
cookiecutter                    2.6.0
create-dash-app                 0.1.2
cryptography                    44.0.0
cycler                          0.12.1
Cython                          3.0.11
dash                            2.18.2
dash_ag_grid                    31.3.0
dash-bootstrap-components       2.0.0b2
dash-bootstrap-templates        2.1.0
dash-core-components            2.0.0
dash_dangerously_set_inner_html 0.0.2
dash_daq                        0.5.0
dash_dock                       0.0.1
dash-extensions                 1.0.19
dash-html-components            2.0.0
dash-iconify                    0.1.2
dash-leaflet                    1.0.15
dash_mantine_components         0.15.3
dash-planet                     0.0.2
dash-table                      5.0.0
dataclass-wizard                0.30.1
debugpy                         1.8.12
decorator                       5.1.1
deep-translator                 1.11.4
defusedxml                      0.7.1
Deprecated                      1.2.18
diff-match-patch                20241021
dill                            0.3.9
docstring-to-markdown           0.15
docutils                        0.21.2
dotenv                          0.9.9
ecos                            2.0.14
EditorConfig                    0.17.0
et_xmlfile                      2.0.0
exceptiongroup                  1.2.2
executing                       2.1.0
fastjsonschema                  2.21.1
flake8                          7.1.1
Flask                           3.0.3
Flask-Caching                   2.3.0
fonttools                       4.55.8
frozenlist                      1.5.0
geopandas                       1.0.1
gssapi                          1.9.0
gunicorn                        23.0.0
h2                              4.2.0
hpack                           4.1.0
hyperframe                      6.1.0
idna                            3.10
imagesize                       1.4.1
importlib_metadata              8.6.1
importlib_resources             6.5.2
inflection                      0.5.1
intervaltree                    3.1.0
ipykernel                       6.29.5
ipython                         8.32.0
isort                           6.0.0
itsdangerous                    2.2.0
jaraco.classes                  3.4.0
jaraco.context                  6.0.1
jaraco.functools                4.1.0
jedi                            0.19.2
jellyfish                       1.1.3
Jinja2                          3.1.5
joblib                          1.4.2
jsbeautifier                    1.15.1
jsonschema                      4.23.0
jsonschema-specifications       2024.10.1
jupyter_client                  8.6.3
jupyter_core                    5.7.2
jupyterlab_pygments             0.3.0
kaleido                         0.1.0.post1
keyring                         25.6.0
kiwisolver                      1.4.7
markdown-it-py                  3.0.0
MarkupSafe                      3.0.2
matplotlib                      3.10.0
matplotlib-inline               0.1.7
mccabe                          0.7.0
mdurl                           0.1.2
mistune                         3.1.1
more-itertools                  10.6.0
mpmath                          1.3.0
multidict                       6.1.0
munkres                         1.1.4
mypy_extensions                 1.0.0
narwhals                        1.27.1
nbclient                        0.10.2
nbconvert                       7.16.6
nbformat                        5.10.4
nest_asyncio                    1.6.0
numexpr                         2.10.2
numpy                           2.2.2
numpydoc                        1.8.0
openpyxl                        3.1.5
osqp                            0.6.7.post3
packaging                       24.2
pages                           0.3
pandas                          2.2.3
pandocfilters                   1.5.0
parso                           0.8.4
pathspec                        0.12.1
patsy                           1.0.1
pexpect                         4.9.0
pickleshare                     0.7.5
piglet-templates                1.3.2
pillow                          11.1.0
pip                             25.0
pkgutil_resolve_name            1.3.10
platformdirs                    4.3.6
plotly                          6.0.0
pluggy                          1.5.0
ply                             3.11
prompt_toolkit                  3.0.50
propcache                       0.2.1
psutil                          6.1.1
ptyprocess                      0.7.0
pure_eval                       0.2.3
pycodestyle                     2.12.1
pyconify                        0.2.1
pycparser                       2.22
pydantic                        2.10.4
pydantic_core                   2.27.2
pydocstyle                      6.3.0
pyflakes                        3.2.0
PyGithub                        2.5.0
Pygments                        2.19.1
PyJWT                           2.10.1
pylint                          3.3.4
pylint-venv                     3.0.4
pyls-spyder                     0.4.0
PyNaCl                          1.5.0
pyogrio                         0.10.0
pyOpenSSL                       25.0.0
pyparsing                       3.2.1
pyproj                          3.7.1
PyQt5                           5.15.9
PyQt5-sip                       12.12.2
PyQtWebEngine                   5.15.4
PySocks                         1.7.1
python-dateutil                 2.9.0.post0
python-dotenv                   1.0.1
python-lsp-black                2.0.0
python-lsp-jsonrpc              1.1.2
python-lsp-server               1.12.1
python-slugify                  8.0.4
pytoolconfig                    1.2.5
pytz                            2024.1
pyuca                           1.2
pywin32                         307
pywin32-ctypes                  0.2.3
PyYAML                          6.0.2
pyzmq                           26.2.1
QDarkStyle                      3.2.3
qdldl                           0.1.7.post5
qstylizer                       0.2.4
QtAwesome                       1.3.1
qtconsole                       5.6.1
QtPy                            2.4.2
referencing                     0.36.2
requests                        2.32.3
retrying                        1.3.4
rich                            13.9.4
rope                            1.13.0
rpds-py                         0.22.3
Rtree                           1.3.0
scikit-learn                    1.6.1
scikit-survival                 0.24.0
scipy                           1.15.1
seaborn                         0.13.2
setuptools                      75.8.0
shapely                         2.0.7
sip                             6.7.12
six                             1.17.0
snowballstemmer                 2.2.0
sortedcontainers                2.4.0
soupsieve                       2.5
Sphinx                          8.1.3
sphinxcontrib-applehelp         2.0.0
sphinxcontrib-devhelp           2.0.0
sphinxcontrib-htmlhelp          2.1.0
sphinxcontrib-jsmath            1.0.1
sphinxcontrib-qthelp            2.0.0
sphinxcontrib-serializinghtml   1.1.10
spyder                          6.0.4
spyder-kernels                  3.0.3
stack_data                      0.6.3
statsmodels                     0.14.4
stringcase                      1.2.0
superqt                         0.7.0
sympy                           1.13.3
tabulate                        0.9.0
text-unidecode                  1.3
textdistance                    4.6.3
threadpoolctl                   3.5.0
three-merge                     0.1.1
tinycss2                        1.4.0
toml                            0.10.2
tomli                           2.2.1
tomlkit                         0.13.2
tornado                         6.4.2
tqdm                            4.67.1
traitlets                       5.14.3
types-python-dateutil           2.9.0.20241206
typing_extensions               4.12.2
tzdata                          2025.1
ujson                           5.10.0
unicodedata2                    16.0.0
urllib3                         2.3.0
vizro                           0.1.34
watchdog                        6.0.0
wcwidth                         0.2.13
webencodings                    0.5.1
Werkzeug                        3.0.6
whatthepatch                    1.0.7
wheel                           0.45.1
win_inet_pton                   1.1.0
wordcloud                       1.9.4
wrapt                           1.17.2
yapf                            0.43.0
yarl                            1.18.3
zipp                            3.21.0
zstandard                       0.23.0
[/details]

Hi @marieanne

Try changing dbc back to V1.6.0.

The dbc V2.x is only compatible with dash >= V3.x

I also recommend upgrading to dash-mantinte-components >= V1.0.0 since it’s compatible with both dash 2 and dash 3.

1 Like

Thank you @AnnMarieW , downgrading to dbc 1.6.0 did the trick.

1 Like