Как правильно добавить стиль в мое приложение Dash?

Question

Я не могу правильно добавить стиль CSS в свое приложение Dash.

Я хочу создать панель инструментов с боковой панелью слева и справа верхней панелью с некоторыми показателями и графиками ниже, например:

Итак, в моем файле 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;
}

Однако я получаю это:

Я не понимаю, почему там отображается эта "верхняя метрика", а не ниже "верхняя метрика"

Answer 1

Здесь сделайте следующее для вашего .top_metrics:

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

Но я бы порекомендовал вам использовать bootsrtap , где вам не нужно писать css, а просто включать имя класса в свои div.

Bootstrap предлагает css, который даст вам классы для структурирования вашего макета и html div с адаптивным дизайном для экранов разных размеров.