0
282
ViewsEl menú desplegable se corta en el cuadro de diálogo modal jquery ui
Usando select2 en jquery.ui.dialog . El problema es que cuando el menú desplegable está abierto, no se desbordará fuera del cuadro de diálogo como lo hace el <select> nativo, sino que simplemente aumenta la altura del cuadro de diálogo.
¿Cómo separar el menú desplegable select2 del flujo del documento para que el menú no se corte?
Ya he intentado aumentar el z-index del menú desplegable y cambiar las reglas de desbordamiento de jquery.ui.dialog . Pero ninguno de estos parece tener ningún efecto.
<div id="myDialog"> <select id="myselect"> <option>Select2Foo</option> <option>Select2Bar1</option> <option>Select2Bar2</option> <option>Select2Bar3</option> <option>Select2Bar4</option> <option>Select2Bar5</option> </select> </div> $("#myDialog").dialog({ autoOpen : true, modal : true, title : "A Dialog Box", width: "90%", }); $('#myselect').select2({ dropdownParent: $('#myDialog') }) Se "corta" / está en el flujo del documento empujando el modal más grande. 
Prefiero que se comporte como selección nativa 
el violín:
1 answers
Answer question0
Respondí mi propia pregunta desde que funcionó y esto podría ser útil para otros en el futuro.
jquery.ui.dialog crea un contenedor .ui-dialog alrededor del elemento que desea convertir en un diálogo.
Necesitaría ambos , su elemento de diálogo y el envoltorio de diálogo jquery.ui, para tener overflow: visible .
.ui-dialog, #myDialog { overflow: visible; }