在 Bootstrap 选项卡容器内时，Dash 传单不渲染

Question

我正在尝试创建一个简单的 Dash 应用程序，其中包含 Dash-Leaflet，以便它将一些点绘制为标记。当没有应用样式时，它显然按预期工作。但我想创建一个带有选项卡的引导程序布局，如下例所示：https://hellodash.pythonanywhere.com/

当我将地图元素放置在选项卡容器中时，它无法正确呈现。如果我把它移开，它就可以正常工作。

这是我到目前为止的代码：

from dash import Dash, dcc, html, dash_table, Input, Output, callback
import plotly.express as px
import dash_bootstrap_components as dbc
import dash_leaflet as dl
import dash_leaflet.express as dlx
from dash_extensions.javascript import assign
import pandas as pd

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

header = html.H4(
    "Sample map", className="bg-primary text-white p-2 mb-2 text-center"
)

data = pd.DataFrame([{'name': 'Point 1', 'lat': 39.535, 'lon': 0.0563, 'cluster': 1, 'val_x': 0, 'val_y': 1},
                     {'name': 'Point 2', 'lat': 40.155, 'lon': -0.0453, 'cluster': 1, 'val_x': 1, 'val_y': 4},
                     {'name': 'Point 1', 'lat': 38.875, 'lon': 0.0187, 'cluster': 2, 'val_x': 2, 'val_y': 2}])

dropdown = html.Div(
    [
        dbc.Label("Select Cluster"),
        dcc.Dropdown(
            data.cluster.unique().tolist(),
            id="cluster_selector",
            clearable=False,
        ),
    ],
    className="mb-4",
)

controls = dbc.Card(
    [dropdown],
    body=True,
)

tab1 = dbc.Tab([dl.Map([dl.TileLayer()], style={'width': '100%',
                                                'height': '50vh',
                                                'margin': "auto",
                                                "display": "block"}, id="map")], label="Map")
tab2 = dbc.Tab([dcc.Graph(id="scatter-chart")], label="Scatter Chart")
tabs = dbc.Card(dbc.Tabs([tab1, tab2]))

app.layout = dbc.Container(
    [
        header,
        dbc.Row(
            [
                dbc.Col(
                    [
                        controls,
                    ],
                    width=3,
                ),
                dbc.Col([tabs], width=9),
            ]
        ),
    ],
    fluid=True,
    className="dbc",
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8052)

这就是它的样子。

我已经尝试了这篇文章建议的解决方案，但它们似乎不起作用（或者我应用了错误）

您对在哪里查找问题有什么建议吗？

非常感谢。

Answer 1

您可以尝试在没有引导程序的情况下制作选项卡，以下方法对我有用：

tabs = dbc.Card(dcc.Tabs([tab1, tab2]))

这不是引导程序风格，但你可以使用以下方法修改它：

tabs = dbc.Card(dcc.Tabs([tab1, tab2],
                         style = {'width': '40%',
                                  'height': '8px',
                                  'line-height': '0px' ,
                                  'line-width': '0px',
                                  'margin-bottom': '40px'}))

Answer 2

调整窗口大小效果好吗？我遇到了类似的错误，您找到答案了吗？