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

Я не могу правильно добавить стиль 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;
}

Однако я получаю следующее:

введите здесь описание изображения

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


python dashboard plotly-dash
person Laura    schedule 16.05.2019    source источник
comment
прежде всего .top_metrics { ширина должна быть 100%, а не 85%, потому что это дочерний элемент div, который является дочерним элементом основного div.   -  person webDev    schedule 16.05.2019
comment
А, спасибо. Ты прав. Но когда я это делаю, эта нижняя верхняя метрика исчезает. Я думаю, что это показывает под лучшими показателями   -  person Laura    schedule 16.05.2019
comment
см. мой ответ ниже, который исчезает, потому что вы используете абсолютное значение вместо относительного. а также не утруждайте себя написанием css для оформления макетов, просто используйте bootstrap.   -  person webDev    schedule 16.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person webDev    schedule 16.05.2019
comment
Большое спасибо, @webDev. Я хотел бы использовать bootstrap, но не нашел шаблона для реализации с Dash. Я пытался использовать dash-bootstrap-components, но кажется, что вся функциональность приложения (app.py) смешана со стилем приложения, и мне было очень сложно организовать приложение. Знаете ли вы некоторые простые шаблон начальной загрузки для реализации с Dash? - person Laura; 16.05.2019
comment
вам не нужен шаблон, напишите то, что вы написали, и вместо того, чтобы определять класс для каждого div самостоятельно, используйте css бутстрапа. bootstrap cas имеет такие классы, как col-md-12, что означает, что div будет иметь 100% ширины. просто скачайте CSS Bootstrap 4. и вместо класса, например, top_metrics, используйте класс начальной загрузки, хорошо, ваш html. Или опубликуйте новый вопрос о переполнении стека с вопросом о том, как использовать bootstrap css.\ - person webDev; 16.05.2019