Как сделать высоту экрана заполнения карты? - PullRequest
Новая
       6

Как сделать высоту экрана заполнения карты?

0 голосов
/ 13 марта 2020

Использование dash для создания простого приложения с левым меню и графиком в качестве основного вывода.

Я настроил ширину с помощью параметра md dbc.Col, и это работает хорошо, как я изменяю размер окна браузера.

Однако у меня возникают проблемы с регулировкой высоты. Я бы хотел, чтобы Card(GRAPHS) ниже заполнило доступную высоту экрана. Как мне это сделать?

У меня есть обратный вызов, возвращающий цифру plotly к тегу my-graph. Если я использую свойство высоты фигуры, оно будет зафиксировано и не будет изменять размеры.

Высота по умолчанию, равная dash / plotly, делает фигуру короткой. 

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

GRAPHS = [
    dbc.CardHeader(html.H5('header')),
    dbc.CardBody([dcc.Graph(id='my-graph')])
]

app = dash.Dash(__name__)

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.Col([dbc.Card(LEFT_MENU)]),
                dbc.Col([dbc.Card(GRAPHS)])  # How to make this fill screen height?
])])])

enter image description here

1 Ответ

0 голосов
/ 22 апреля 2020

Может быть, кто-то с большим опытом использования dash мог бы дать вам лучший ответ, но я думаю, что вы можете установить определенный c вертикальный размер для ваших карт, используя ключевое слово style. Затем вы можете передать словарь с аргументами для CSS таблицы стилей, в этом случае мы хотим изменить высоту, чтобы {'height':'100vh'}. Я бы попробовал это: 

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.Col([dbc.Card(LEFT_MENU, style={'height':'100vh'})]),
                dbc.Col([dbc.Card(GRAPHS, style={'height':'100vh'})])  
])])])

Вы можете поиграть с различными значениями vh, чтобы увидеть, что подходит лучше всего

В качестве альтернативы вы можете поместить карты в CardGroup, как описано в документация . Это должно заставить все карты иметь одинаковую высоту: 

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.CardGroup([
                    dbc.Card(LEFT_MENU),
                    dbc.Card(GRAPHS)
                ]) 
            ])
    ])
...