问题

我有多个下拉菜单，其中有数十个选项可供选择。随着用户选择越来越多的选项，下拉菜单的大小会变大。有没有办法保持大小不变，并以更短的方式显示选择项？我在样式选项中设置了最大宽度参数，但它没有按预期工作。

英文:

I have multiple drop down menus having tens of options to select. As the user selects more and more options, the size of the drop down menu gets larger. Is there a way to keep the size unchanged and show the selections in a shorter way? I set the max width parameters in the style option, but it does not work as intended.

from dash import Dash, dcc, html
external_stylesheets = [&#39;https://codepen.io/chriddyp/pen/bWLwgP.css&#39;]
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(className=&quot;row&quot;, children=[
            html.Div(className=&#39;row&#39;, children=[
                html.Div(className=&#39;four columns&#39;, children=[
                    dcc.Dropdown(
                        options=[
                            {&#39;label&#39;: &#39;North America&#39;, &#39;value&#39;: &#39;NA&#39;},
                            {&#39;label&#39;: &#39;Europe&#39;, &#39;value&#39;: &#39;EU&#39;},
                            {&#39;label&#39;: &#39;Asia&#39;, &#39;value&#39;: &#39;AS&#39;}
                        ],
                        multi=True
                    )
                ]),
                html.Div(className=&#39;four columns&#39;, children=[
                    dcc.Dropdown(
                        options=[
                            {&#39;label&#39;: &#39;United States&#39;, &#39;value&#39;: &#39;USA&#39;},
                            {&#39;label&#39;: &#39;Canada&#39;, &#39;value&#39;: &#39;CAN&#39;},
                            {&#39;label&#39;: &#39;France&#39;, &#39;value&#39;: &#39;FRA&#39;},
                            {&#39;label&#39;: &#39;Germany&#39;, &#39;value&#39;: &#39;GER&#39;},
                            {&#39;label&#39;: &#39;China&#39;, &#39;value&#39;: &#39;CHN&#39;},
                            {&#39;label&#39;: &#39;India&#39;, &#39;value&#39;: &#39;IND&#39;}
                        ],
                        multi=True
                    )
                ]),
                html.Div(className=&#39;four columns&#39;, children=[
                    dcc.Dropdown(
                        options=[
                            {&#39;label&#39;: &#39;New York City&#39;, &#39;value&#39;: &#39;NYC&#39;},
                            {&#39;label&#39;: &#39;Montreal&#39;, &#39;value&#39;: &#39;MTL&#39;},
                            {&#39;label&#39;: &#39;San Francisco&#39;, &#39;value&#39;: &#39;SF&#39;},
                            {&#39;label&#39;: &#39;London&#39;, &#39;value&#39;: &#39;LDN&#39;},
                            {&#39;label&#39;: &#39;Tokyo&#39;, &#39;value&#39;: &#39;TKY&#39;},
                            {&#39;label&#39;: &#39;Mumbai&#39;, &#39;value&#39;: &#39;MUM&#39;}
                        ],
                        multi=True
                    )
                ])
            ]),
    ])
])
if __name__ == &#39;__main__&#39;:
    app.run(debug=True)

答案1

得分: 0

我遇到了相同的样式问题，并创建了这个自定义CSS，重新设计了多选组件，具体如下：选定的值不会换行，您可以水平滚动以查看它们全部，始终保持相同的高度和宽度。

这是一种个人口味的问题，但可能会有用，所以我在这里发布它：

.Select--multi > .Select-control {
  display: flex;
  align-items: center;
}
.Select--multi .Select-multi-value-wrapper {
  flex: 1;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  box-shadow: inset -7px 0 9px -7px rgb(187 187 187);
}
.Select-multi-value-wrapper::-webkit-scrollbar {
  display: none;
}

英文:

I had the same styling issue and came up with this custom CSS that restyles the multi-selection component as follow: the selected values don't wrap and you can horizontally scroll to see them all, keeping the same height and width at all time.

It's a matter of taste but can be useful, so I post it here:

.Select--multi &gt; .Select-control {
  display: flex;
  align-items: center;
}
.Select--multi .Select-multi-value-wrapper {
  flex: 1;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  box-shadow: inset -7px 0 9px -7px rgb(187 187 187);
}
.Select-multi-value-wrapper::-webkit-scrollbar {
  display: none;
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

保持Dash中下拉菜单的虚拟尺寸不变 – Python

问题

答案1

在Python中将列表附加到基本列表中。

将消息从一个频道自动转发到另一个频道的方法使用Python

尝试在一个”if… else…”语句中调用一个函数，但它说下面的函数没有定义。

你可以如何重命名我的PyPI项目以修复其大小写问题？

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。