submenús - menu desplegable vertical html

Bootstrap desplegable recortado por desbordamiento: contenedor oculto, ¿cómo cambiar el contenedor?

Question

Al utilizar bootstrap, tengo un menú desplegable dentro de un div con overflow:hidden , que se necesita para ser así. Esto causó que los recuadros sean recortados por el contenedor.

Mi pregunta, ¿cómo puedo resolver este problema de recorte, por ejemplo, cambiar el contenedor de todos los menús desplegables dentro de mi proyecto para que sea el body , con el menor costo posible?

Este es un ejemplo del código: http://jsfiddle.net/0y3rk8xz/

Answer 1

Cambia la propiedad div a overflow:visible; , o Establecer Position:absolute; en clase caída.

.bs-example .dropdown{position:absolute;}

Consulte el Código de trabajo: http://jsfiddle.net/guruWork/3x1f8ng5/

Answer 2

Es posible cambiar el contenedor utilizando jQuery, por ejemplo, $(".dropdown").insertAfter(".bs-example");

Vea este código por ejemplo: https://jsfiddle.net/SolveItSimply/pwmyvsw6/

Sin embargo, no recomiendo esto, ya que perderá algo de la utilidad del posicionamiento de Bootstrap y mantener los elementos desplegables en orden será complicado.

En su lugar, podría usar overflow:visible junto con la clase ''oculta'' para su ventaja, ocultando cualquier elemento que se desborda con JavaScript. Aquí hay un ejemplo: http://jsfiddle.net/SolveItSimply/z14c210x/

Necesitará verificar los elementos contenidos cuando el div esté visible por primera vez y siempre que cambie la altura del contenedor, lo que intenté demostrar en mi ejemplo.

Answer 3

Estaba enfrentando el mismo problema y después de buscar por horas ... creé un controlador de eventos para capturar el menú desplegable y obtener las posiciones y adjuntarlo dinámicamente. para que no se corte.

Aquí está el código simple que utilicé. Pruébalo si esto te ayuda.

$(''.dropdown-toggle'').click(function (){
     dropDownFixPosition($(''button''),$(''.dropdown-menu''));
 });
 function dropDownFixPosition(button,dropdown){
    var dropDownTop = button.offset().top + button.outerHeight();
    dropdown.css(''top'', dropDownTop + "px");
    dropdown.css(''left'', button.offset().left + "px");
  }

Answer 4

Me enfrenté al mismo problema, con la necesidad de tener un overflow:hidden conjunto overflow:hidden , pero aún así no se recortó el menú desplegable.

Sin embargo, mi situación involucró a Bootstrap Carousel , así que decidí que una solución válida haría que el desbordamiento sea visible solo cuando se abre el menú desplegable, y cuando se cierra, el desbordamiento puede volver a ocultarse. Esta solución podría funcionar para otros, así que la estoy compartiendo.

$(''.dropdown-toggle'').click(function() {
  var $container = $(this).parent(''.carousel-inner'');
  $container.css(''overflow'',''visible'');
  $(document).one(''click'', function() {
      $container.css(''overflow'','''');
  });        
});

Tenga en cuenta que esto no comprueba si se usó la tecla Esc para cerrar el menú desplegable, pero en mi caso no fue un problema. Mi propia versión usa una clase para aplicar el estilo que algunos desarrolladores pueden preferir en lugar de modificar el CSS en línea.

Answer 5

Mi solución fue usar posicionamiento estático en el menú desplegable. Tuve el menú desplegable dentro de una tabla de arranque con el desbordamiento oculto.

<div class="table" style="overflow: hidden;">
  <div class="dropdown" style="position: static;">
    <div class="dropdown-menu">...</div>
  </div>
</div>

Sin embargo, no funcionó con tu violín. Así que no estoy seguro si mi solución tuvo algo que ver con las tablas de arranque. En cualquier caso, tal vez le dará a alguien algo nuevo que probar.

Answer 6

No pude configurar el contenedor para que se overflow:visible , pero insertando un

<div class="clearfix" />

Debajo del bloque que contiene el menú desplegable se solucionó el problema.

Answer 7

Si alguien interesado en una solución alternativa para esto, bootstrap dropdown tiene un evento show.bs.dropdown que puede usar para mover el elemento desplegable fuera del contenedor de overflow:hidden contenedor overflow:hidden .

$(''.dropdown'').on(''show.bs.dropdown'', function() {
  $(''body'').append($(''.dropdown'').css({
    position: ''absolute'',
    left: $(''.dropdown'').offset().left,
    top: $(''.dropdown'').offset().top
  }).detach());
});

también hay un evento hidden.bs.dropdown si prefiere mover el elemento de nuevo a donde pertenece una vez que se cierra el menú desplegable:

$(''.dropdown'').on(''hidden.bs.dropdown'', function() {
  $(''.bs-example'').append($(''.dropdown'').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

Aquí hay un ejemplo de trabajo:

http://jsfiddle.net/qozt42oo/32/

Answer 8

Solo cambia el valor de desbordamiento a visible .

Answer 9

Tenía un elemento div con una clase de panel Bootstrap que contenía DevExpress ComboBoxes contenidos en elementos div con clases de col-lg Bootstrap.

Tuve un problema con el color del fondo del panel o el color del borde que sangraba en la div anterior. Para resolver eso agregué overflow:hidden; al panel pero eso provocó que el menú desplegable ComboBox se cortara. Agregué style="position: inherit" a los elementos div dentro del panel contienen ComboBoxes y resolvieron el problema.

<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
 <dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>

Esta solución la encontré here .

Answer 10

Todas las sugerencias que se han hecho aquí carecen de algo y no pude hacer que funcionen correctamente. Así que he hecho este basado en todas las sugerencias y funciona muy bien para mí.

He utilizado otra clase aquí para hacer que sea diferente a los elementos de lista desplegable regulares que podría querer que se ejecuten de forma regular.

$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {

    //original dropdown element
    var thisDropdown = $(this);

    //make a deep clone
    var thisDropdownCopy = thisDropdown.clone(true, true);

    //append to the body with a different class which is my-modified-dropdown here 
    //and open which will make dropdown menu show up
    $("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );

    //hide the original dropdown element
    $(this).hide();

})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {

    //remove modified dropdowns
    $(".dropdown.my-body-dropdown.my-modified-dropdown").remove();

    //show original dropdowns
    $(".dropdown.my-body-dropdown").show();

});

Answer 11

Tuve algún tipo de problema de desplazamiento con la mayoría de las soluciones en esta y otras preguntas que he visto en SO. Lo que funcionó para mí fue hacer inherit posición desplegable:

.dropdown {
  position: inherit;
}

Y luego establezca la posición del dropdown-menu usando JavaScript:

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/ck66ee9q/