web-dev-qa-db-ja.com

私のダッシュアプ​​リにスタイルを適切に追加する方法は？

私のダッシュアプ​​リにCSSスタイルを正しく追加できません。

このように、いくつかの測定基準とプロットを持つトップバーを左側に持つダッシュボードを作成します. enter image description here

だから、私のapp.pyファイルで私は持っています：

app = dash.Dash()
app.layout = html.Div(
            className="content",
            children=[

html.Div(
    className="left_menu",
    children=[
        html.Div(
            'This is the left menu'
        ),
    ]
),

html.Div(
    className="right_content",
    children=[
        html.Div(
            className="top_metrics",
            children=[
            'This is top metrics'
            ]
        ),
        html.Div(
            'This down top metrics'
        ),
    ]
),

if __name__ == '__main__':
app.run_server(debug=True)
 _

そしてCSSファイル：

.content{
 width: 100%;
 background: #F7F7F7;
 }

.right_content{
 width:85%;
 position:absolute;
 top: 0;
 right: 0; 
 }

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:85%;
 position:absolute;
 top: 0;
 right: 0;
 }

.left_menu {
 width: 15%;
 position: absolute;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 999;
 background: #2A3F54;
}
 _

しかし、私はこれを入手します：

enter image description here

なぜ「これはトップメトリック」が表示され、下の「トップメトリクス」の下には表示されません。

pythondashboardplotly-dash
4
Laura

これはあなたの.top_metricsのために次のようにします：

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:100%;
 position:relative;
 top: 0;
 right: 0;
 }

しかし、私はあなたが使用することをお勧めしますbootstrap、ここでCSSを書く必要はありませんが、クラス名を含めるだけです。 div.

Bootstrapは、レイアウトとHTML DIVを異なる画面サイズに対してレスポンシブデザインで構造化するクラスを提供するCSSを提供します。

1
webDev