我正在用 python 开发一个 Dash Web 应用程序，而且我对这个框架还很陌生，所以我正在努力让 UI 按照我想要的方式运行。
基本上我有以下 UI，其中有 2 个下拉菜单，可以让我相应地过滤并重新渲染图表。问题是，当我从下拉列表中选择更多点时，它不可避免地会增长以适应当前所选选项的列表。
查看图片：
现在我需要向下滚动才能看到下拉列表。的项目已被选择。但我真正想要的是这个列表可以水平滚动，这样我设置的容器的整体大小就不会改变，因此它不会将其下面的容器进一步向下推。请参阅下面的问题：
这是我当前的 app_layout 代码：
app.layout = html.Div([
html.Div([
html.H1('Summary:', style={'margin': '30px', 'align-items': 'center', 'color': '#555555'}),
html.Div(
id='output-summary',
style={
'width': '85%',
'display': 'inline-block',
'verticalAlign': 'top',
'overflowY': 'scroll',
'maxHeight': 'calc(100vh - 300px)',
'padding': '20px'
}
)
], style={
'width': '30%',
'background': 'linear-gradient(270deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
# Inverted gradient for left side div
'height': '100%',
'position': 'fixed',
'left': 0,
'top': 0,
'bottom': 0,
'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)',
'overflowY': 'scroll',
'z-index': '1',
}),
html.Div([
html.Div([
html.H1(colored_title, style={'color': '#FFFFFF', 'margin-left': '30px', 'margin-right': '15px'}),
html.Div([
dcc.Dropdown(
id='file-dropdown',
options=[
{'label': os.path.basename(path), 'value': os.path.basename(path)}
for path in file_paths
],
multi=True,
value=[],
placeholder='Choose files...',
style={
'width': '100%',
'background-color': 'rgba(16, 16, 16, 0.3)',
'overflowY': 'scroll',
'border': 'none',
'margin': '16px',
'padding-right': '30px',
'font-size': '12px',
'line-height': '24px',
'z-index': '3',
}
),
dcc.Dropdown(
id='package-dropdown',
options=[
{'label': package, 'value': package}
for package in package_files
],
value=None,
placeholder='Choose a package...',
style={
'width': '100%',
'background-color': 'rgba(16, 16, 16, 0.3)',
'margin': '16px',
'padding-right': '30px',
'border': 'none',
'font-size': '12px',
'line-height': '24px',
'z-index': '3',
}
),
], style={'display': 'flex', 'height': '150px', 'justify-content': 'space-between', 'width': '100%'})
], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'width': '95%'}),
dcc.RadioItems(
id='open-file-radio',
options=[
{'label': 'Open File On Click', 'value': 'open_file'}
],
style={'margin': '20px', 'color': '#FFFFFF'}, # Added color
value=None,
labelStyle={'display': 'block'}
),
html.Div(id='scatter-plot-container',
children=[dcc.Graph(id='scatter-plot',
figure=fig,
clickData=None,
style={'height': '650px', 'margin': '20px'})
],
style={'width': '95%', 'margin': '10px', 'margin-left': '20px', 'display': 'inline-block',
'border-radius': '16px', 'background-color': 'rgba(255, 255, 255, 0.1)',
'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)', })
], style={
'width': '70%',
'margin-end': '20px',
'height': '100%',
'position': 'fixed',
'right': 0,
'top': 0,
'bottom': 0,
'background': 'linear-gradient(90deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
'overflowY': 'scroll',
'align-items': 'center',
'box-shadow': '-8px 0px 20px rgba(0, 0, 0, 0.1)',
'z-index': '4'
})
])
对此的任何帮助都非常感谢。或者，如果由于某种原因这是不可能的，我愿意接受替代方案！
谢谢！
编辑：
我已经尝试添加 css 样式：
display: flex;
overflow-x: scroll;
}
#file-dropdown .Select-value {
flex: 0 0 50px;
}
但我仍然看到问题为如下图所示：
可以设置固定高度，并让下拉列表在该高度内水平滚动。问题在于下拉列表的父元素没有定义的宽度，因此会随着下拉列表的扩展而扩展。
可以通过以下方法解决此问题：
-
将固定宽度应用于下拉列表容器： 为包含两个下拉列表的
html.Div添加一个style属性。然后，可以使用max-width设置最大宽度，并使用overflow-x启用水平滚动。 -
使用 CSS 类进行样式设置： 创建一个 CSS 类来定义下拉列表样式，并在下拉列表的
className属性中使用它。
以下是更新后的代码：
app.layout = html.Div([
# ... 其他代码 ...
html.Div([
html.Div([
html.H1(colored_title, style={'color': '#FFFFFF', 'margin-left': '30px', 'margin-right': '15px'}),
html.Div([
dcc.Dropdown(
id='file-dropdown',
# ... 其他属性 ...
style={
# ... 其他样式 ...
'width': '48%', # 使用百分比控制每个下拉列表的宽度
}
),
dcc.Dropdown(
id='package-dropdown',
# ... 其他属性 ...
style={
# ... 其他样式 ...
'width': '48%', # 使用百分比控制每个下拉列表的宽度
}
),
], style={'display': 'flex', 'height': '150px', 'justify-content': 'space-between',
'width': '100%', 'overflow-x': 'auto'}), # 添加 overflow-x
], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'width': '95%'}),
# ... 其他代码 ...
], style={
# ... 其他样式 ...
})
])
在此代码中，我们对包含两个下拉列表的
html.Div
进行以下更改：
-
display: 'flex'和justify-content: 'space-between'： 确保两个下拉列表并排显示。 -
width: '100%'： 使容器占据其父元素的全部可用宽度。 -
overflow-x: 'auto'： 启用水平滚动条（如果内容超出容器宽度）。
通过这些更改，下拉列表将不再扩展其父容器，而是在达到最大宽度时显示水平滚动条。
标签：python,html,plotly,plotly-dash,plotly-python From： 75921753