menú desplegable de bootstrap en colapso,

Question

Estoy utilizando Bootstrap 2.0.3, con menús desplegables dentro de divs que son plegables/ampliables. Cuando el menú desplegable desborda el div, se cortan (pero no deberían). JsFiddle para ilustrar: http://jsfiddle.net/t3wFK/1/

En Bootstrap 2.0.2 el menú no quede cortada: http://jsfiddle.net/u3wkK/

me encontré con la mitad de una solución mediante el uso de una regla CSS de la siguiente manera:

#stuff.in { 
    overflow: visible; 
} 

El 'en 'css class se agrega por bootstrap cada vez que un div marcado con' collapse 'se expande.

Lamentablemente, esta solución se rompe completamente en Firefox.

¿Alguna idea? Estoy considerando degradar a Bootstrap 2.0.2, pero sería doloroso.

Answer 1

El problema parece ser que en 2.0.3, se aplica la clase Bootstrap .collapse al elemento #stuff. En el css de arranque, hay un estilo:

.collapse { 
    overflow: hidden; 
} 

Sin embargo, cuando se expande un objetivo .collapse, la propiedad sigue siendo overflowhidden.

No estoy seguro si se trata de un error o no (tendría que examinarlo más a fondo para ver si hay algún inconveniente para hacer esto), pero la modificación de la regla para .collapse.in funcionaría.

.collapse.in { 
    height: auto; /* this style already exists in bootstrap.css */ 
    overflow: visible; /* this one doesn't. Add it! */ 
} 

Si prefiere no modificar el CSS de Bootstrap (que puede tener efectos secundarios no deseados como se indica en los comentarios), puede agregar shown y hide controladores de eventos a su elemento #stuff para modificar la propiedad overflow:

$('#stuff').on({ 
    shown: function(){ 
     $(this).css('overflow','visible'); 
    }, 
    hide: function(){ 
     $(this).css('overflow','hidden'); 
    } 
}); 

Answer 2

Pruebe usar la bandera !important, como parece en Firefox, las propiedades se leen con diferente prioridad por alguna razón.

http://jsfiddle.net/t3wFK/2/

.in { 
    overflow: visible !important; 
} 

Answer 3

He intentado su solución con Bootstrap 2.1.1 y se rompe en Firefox 16, trabajando por primera vez y luego no se abre en absoluto.

En mi caso, el problema fue solo la primera vez que un visitante abrió el elemento plegable y se aplicó una altura fija en línea. La altura del segundo tiempo se estableció en automático.

Así que me he dado cuenta que el problema se basa en el código HTML para NAV-wich colapso elemento no tiene un estado declarado en un primer momento:

Aquí está el código en un primer momento:

<div class="nav-collapse"> 

a continuación, después de expandirse primera vez de arranque asigna altura fija:

<div class="nav-collapse in collapse" style="height: 286px;"> 

Y después de cerrar primera altura tiempo de nuevo a 0:

<div class="nav-collapse collapse" style="height: 0px;"> 

de apertura por segunda vez y funciona bien con la altura de auto:

<div class="nav-collapse collapse" style="height: auto;"> 

se necesita .collapse Así clase para el JavaScript para establecer la altura automática:

<div class="nav-collapse collapse"> 

Me tomó un tiempo ¡averiguar!

Answer 4

que estaba haciendo un gran trabajo de investigación en este encontró una solución al problema mediante la adición de esta línea de código para el css, encontré esto en https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

.collapse.in[style="height: auto;"] {overflow: visible;} 

Esto hizo el truco para mí Espero que esto funcione para usted