Tengo problemas para hacer que el div debajo del menú desplegable 'multi' (dcc.dropdown from dash) se presione hacia abajo cuando se han seleccionado varias opciones del menú en lugar de superponerse como en la imagen de abajo (o enviarse al fondo dependiendo de el índice z). El menú desplegable está dentro de otro div. He intentado cambiar la visualización y la posición del CSS sin ningún resultado positivo todavía.

enter image description here

El código se parece a esto:


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')

También hay código CSS para algunos componentes:


.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;
}

Espero que la solución sea con un cambio en la propiedad de visualización o posición de un elemento, pero creo que tiene algo que ver con el CSS predeterminado para el componente del tablero que se puede encontrar aquí.

Puede consultar el panel en enlace

Si cambio la posición de .Select-menu-outer a relativa como lo sugiere CBroe en los comentarios, lo siguiente sucederá solo cuando se abra el menú:

enter image description here

1
pablinhoechel 1 sep. 2020 a las 16:21

1 respuesta

La mejor respuesta

El problema fue establecer la altura del dcc.Dropdown en 20px, simplemente eliminando 'height':'20px' el problema se resolvió

0
pablinhoechel 16 oct. 2020 a las 13:40