Hi members,
Need your help~
When I use dbc.Tabs
with pages
and dash-leaflet
, I met two problems.
The first issue is that when using the additional input of the Pages Routing to switch languages, the active tab become empty.
\downarrow
And I saw that someone has encountered this difficulty before.
Another issue is that when I put dl.Map
into the tab 2, large blocks of gray appear.
However, this situation will return to normal after I resize the browser window.
Hi @Emil , do you know if this is a known bug?
Can I add a client-side callback to fix or bypass this issue?
Here’s my code.
app.py
from dash import Dash, html, dcc, page_container, page_registry, Input
import dash_bootstrap_components as dbc
import dash_leaflet as dl
def create_app():
app = Dash(
use_pages=True,
external_stylesheets=[dbc.themes.BOOTSTRAP],
routing_callback_inputs={
# The language will be passed as a `layout` keyword argument to page layout functions
"language": Input("language", "value"),
},
)
TRANSLATIONS = {
"en": {
"title": "My app",
},
"fr": {
"title": "Mon app",
},
}
DEFAULT_LANGUAGE = "en"
app.layout = html.Div(
[
html.H1("Multi-page app with Dash Pages"),
dcc.Dropdown(
id="language",
options=[
{"label": "English", "value": "en"},
{"label": "Français", "value": "fr"},
],
value=DEFAULT_LANGUAGE,
persistence=True,
clearable=False,
searchable=False,
style={"minWidth": 150},
),
html.Div(
[
html.Div(
dcc.Link(
f"{page['name']} - {page['path']}",
href=page["relative_path"],
)
)
for page in page_registry.values()
]
),
page_container,
]
)
return app
if __name__ == "__main__":
app = create_app()
app.run(debug=True)
pages/test.py
from dash import html, register_page
import dash_bootstrap_components as dbc
import dash_leaflet as dl
register_page(__name__)
def layout(language: str = "en", **_kwargs):
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.Row(
[
dbc.Col(
[
dl.Map(
dl.TileLayer(),
center=[56, 10],
zoom=6,
style={"height": "300px"},
)
]
)
]
),
dbc.Row(
[
dbc.Col(
[
dbc.Button("Click here", color="success"),
]
)
]
),
]
),
className="mt-3",
)
tab3_content = dbc.Card(
dbc.CardBody(
[
html.P("This is tab 3!", className="card-text"),
dbc.Button("Don't click here", color="danger"),
]
),
className="mt-3",
)
tabs = dbc.Tabs(
[
dbc.Tab(tab1_content, label="Tab 1"),
dbc.Tab(tab2_content, label="Tab 2"),
dbc.Tab(tab3_content, label="Tab 3"),
]
)
layout = html.Div(tabs)
return layout
Any help is appreciated.