Блог

Я хочу сделать 2 строки записей. Каждая строка имеет одну метку с левой стороны, за которой следует до 20 записей. Я использую dbc.Container для хранения макета. В контейнере у меня есть несколько dbc.карт. Для простоты здесь я использовал только одну карту. На этой карточке я разместил 2 ряда компонентов.

С помощью кода, приведенного ниже, на скриншоте выше показаны результаты. Две вещи-это не то, чего я хочу.

1. Первый столбец в 2 строках предназначен для меток, которые не должны быть включены в зону прокрутки.
2. 20 записей в каждой строке сжаты, чтобы быть очень узкими, а полоса прокрутки x почти не прокручивается. Каждая запись должна быть достаточно широкой, чтобы показывать количество из 6 цифр, например 123.123 .

Не могли бы вы, пожалуйста, показать мне, как это сделать? Спасибо

 import dash from dash import html import dash_bootstrap_components as dbc  app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])  app.layout = dbc.Container([  dbc.Row([  dbc.Col([  dbc.Card([  html.H4('Card Header'),  dbc.Row([  dbc.Col([  dbc.Label('Row 1'),  ]),  *[  dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)  ]  ]),  dbc.Row([  dbc.Col([  dbc.Label('Row 2'),  ]),  *[  dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)  ]  ])  ], style={'overflow-x': 'scroll'})  ])  ]) ])   if __name__ == "__main__":  app.run_server(debug=True)  

Ваш 2-й вопрос прост, просто добавьте style={"width":"120px"} в свой ввод или любое другое значение, соответствующее вашим потребностям.

1 — й вопрос довольно сложный, и я не думаю, что существует правильное решение для Тире.

Что вы можете сделать, так это вывести свои метки за пределы области прокрутки. Смотрите мое предложение ниже. Возможно, вам потребуется изменить высоту строки, чтобы выровнять метки и строки данных. Но это должно быть возможно.

 import dash from dash import html import dash_bootstrap_components as dbc  app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])  app.layout = dbc.Container([  dbc.Row([  dbc.Col([  dbc.Container([  dbc.Label('Row 1'),  dbc.Label('Row 2'),  ], style={  "display": "flex",  "flexDirection": "column",  "alignItems": "flex-end",  "justifyContent": "flex-end"  }),  dbc.Card([  html.H4('Card Header'),  dbc.Row([  *[  dbc.Col([dbc.Input(placeholder='123.123', style={"width":"120px"})]) for _ in range(20)  ]  ], style={"flexWrap":"nowrap"}),  dbc.Row([  *[  dbc.Col([dbc.Input(placeholder='123.123', style={"width":"120px"})]) for _ in range(20)  ]  ], style={"flexWrap":"nowrap"})  ], style={'overflowX': 'scroll'})  ], style={"display": "flex"})  ]) ])   if __name__ == "__main__":  app.run_server(debug=True)  

Выглядит так: