当从 dcc.dropdown 菜单中选择了几个选项时，我需要将 div 按下（破折号组件，python）

Question

当从菜单中选择了多个选项而不是重叠时，我无法将 'multi' 下拉菜单（来自破折号的 dcc.dropdown）下方的 div 按下在下图中（或根据 z-index 发送到后面）。下拉菜单位于另一个 div 内。我试过更改 css 显示和位置，但没有积极结果。

代码看起来像这样：


html.Div([
    html.Div(children=html.H2('SIMILAR PLAYERS', className='titulo_ventanah2'), className='titulo_ventana'),

    html.Div(children=[(html.I(className='search')),'Search by:'],style={'display':'inline-block','padding-left':'15%', 'font-size':'13px'}),

    html.Div(children=(dcc.Dropdown(style={'height':'20px', 'font-size':'14px'},persistence_type='session')),style={'display':'inline-block', 'padding':'0px 0px 0px 10px', 'width':'200px', 'margin-top':'5px'}),

    html.Div(children=(dcc.Dropdown(multi=True,style={'height':'20px', 'font-size':'14px'})),style={'padding':'0px 0px 0px 10px', 'width':'400px', 'margin-top':'5px'}, className='similardiv'),

    html.Div([
        html.Div(children=[html.Div(html.H3('Top 15 most similar players',className='titulo_ventanah3'),className='titulo_ventanaint'),

        html.Hr(),

        html.Div([children=dcc.Graph())])],className='similar_players'),
    ])
],className='container1')

还有一些组件的 CSS 代码：


.container1 {
  position: fixed;
  width:80%;
  height:100%;
  display:inline-block;  
  left:20%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  overflow: hidden;
  top:0;
  overflow:auto;
  background-color: #f5f5f5;
}

.titulo_ventana {
  top:0;
  display:inline-block;
  background-color: #f5f5f5;
  padding-left:2%;
  margin: 0px 0px 0px 0px;
}

.titulo_ventanah2 {
  text-decoration: none;
  font-size: 20px;
  line-height:45px;
  color: #8f8f8f;
  margin: 0px 0px 0px 0px;  
  display: inline-block;
  letter-spacing: 0.01em;
}

.titulo_ventanaint {
  overflow: hidden;
  z-index:5;
  height:39px;
  display:inline-block;
  background-color: white;
}


.titulo_ventanah3 {
  max-width:100%;
  text-decoration: none;
  font-size: 14px;
  color: black;
  line-height:45px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  text-align: left;
  overflow:hidden;
  letter-spacing: 0.01em;
}


.similar_players {
  width: 97%;
  overflow: auto;
  height:540px;
  font-size: 15px;
  color: #002e5c;
  background-color: white;
  margin-top:1.5%;
  margin-left:1.5%; 
  display: block;
  position:relative;
  z-index:1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.similardiv {
  position:relative;
  z-index:2;
  display:inline-block;
}

我希望解决方案是改变元素的显示或位置属性，但我相信它与 dash 组件的默认 css 有关，可以是找到 here.

您可以在 link

中查看仪表板

如果我按照 CBroe 在评论中的建议将 .Select-menu-outer 的位置更改为 relative，则只有在打开菜单时才会发生以下情况：

Answer 1

问题是将 dcc.Dropdown 的高度设置为 20px，只需删除 'height':'20px' 问题就解决了

当从 dcc.dropdown 菜单中选择了几个选项时，我需要将 div 按下（破折号组件，python）

I need a div to be pushed down when several options from a dcc.dropdown menu have been selected (dash component, python)

html

css

python

plotly-dash