問題・エラー
dash-bootstrap-componentsを使って各dbc.Rowの高さを設定しても、ページに正しく反映されません。
具体的には「ソースコード」に記載したコードを実行しても、下図のようなページが表示されます。
ページの簡単な構成は以下のようになっています。
- ページ全体:高さをビューポイントの95%、背景色をgrey
- 1行目:html.H1で1列、className="h-10"
- 2行目:html.Divで2列、className="h-40"
- 3行目:html.Divで2列、className="h-40"
コード上では、ページ全体の大きさをビューポイントの95%、背景色をgreyにしており、下図でも反映されているのがわかります。また「タイトル」と書かれたhtml.H1要素も全体の10%(className="h-10")の大きさであり、設定どおりです。
しかし、2行目以降の行の高さが設定した値ではなくなっています。className="h-40"とした2、3行目は本来1行目のhtml.H1よりも高くなるはずですが、そうなっていません。
分かる方がいましたら、ご教授お願いします。
試したこと
更新ボタンを押したり、サーバを新しく起動し直しても変化がありませんでした。
背景色を変更して更新するとすぐに反映されるため、なぜか高さだけが意図したように変化しない状態になっています。
該当のソースコード
Python
1import dash 2import dash_bootstrap_components as dbc 3from dash import html, dcc 4import plotly.express as px 5import plotly.graph_objects as go 6from dash.dependencies import Input, Output 7 8 9app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) 10 11app.layout = dbc.Container( 12 [ 13 dbc.Row( 14 dbc.Col( 15 html.H1("タイトル"), 16 width=12, 17 style={"height": "100%", "background-color": "pink"}, 18 ), 19 className="h-10" 20 ), 21 dbc.Row( 22 [ 23 dbc.Col( 24 html.Div("This is column 1"), 25 width=8, 26 style={"height": "100%", "background-color": "red"}, 27 ), 28 dbc.Col( 29 html.Div("This is column 2"), 30 width=4, 31 style={"height": "100%", "background-color": "green"}, 32 ), 33 ], 34 className="h-40", 35 ), 36 dbc.Row( 37 [ 38 dbc.Col( 39 html.Div("This is column 3"), 40 width=8, 41 style={"height": "100%", "background-color": "blue"}, 42 ), 43 dbc.Col( 44 html.Div("This is column 4"), 45 width=4, 46 style={"height": "100%", "background-color": "cyan"}, 47 ), 48 ], 49 className="h-40", 50 ), 51 ], 52 style={"height": "95vh", "background-color": "grey"}, 53) 54 55if __name__ == "__main__": 56 app.run_server(debug=True)
環境・補足情報
OS:Windows 10 Home
Python : Python3.6.8
dash==2.1.0
dash-bootstrap-components==1.0.3
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
dataclasses==0.8
あなたの回答
tips
プレビュー