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]