bootstrap dropdown dans l'effondrement,

Je suis en utilisant Bootstrap 2.0.3, avec des menus déroulants à l'intérieur de divs qui est pliable /extensible. Lorsque le menu déroulant des débordements de la div, ils me couper (mais ils ne devraient pas). Jsfiddle pour illustrer: http://jsfiddle.net/t3wFK/1/

Dans le Bootstrap 2.0.2 le menu n'est pas coupé: http://jsfiddle.net/u3wkK/

J'ai trouvé la moitié d'une solution de contournement en utilisant une règle css comme suit:

#stuff.in {
  overflow: visible;
}

En classe css est ajouté par bootstrap chaque fois qu'un div marqués avec "l'effondrement" reçoit élargi.

Malheureusement cette solution de contournement rompt totalement dans Firefox.

Des idées? J'envisage de me rabattre sur Bootstrap 2.0.2, mais ce serait douloureux.

source d'informationauteur chris6953

17

Ici, le problème semble être que dans la version 2.0.3, Bootstrap applique la .collapse classe à la #stuff élément. Dans le bootstrap css, il y a un style:
```
.collapse {
    overflow: hidden;
}
```
Toutefois, lorsque vous développez un .collapse cible, le overflow propriété reste hidden.

Ne sais pas si c'est un bug ou pas (faudrait regarder de plus profond pour voir si il ya des inconvénients à le faire), mais la modification de la règle pour .collapse.in serait de travailler.
```
.collapse.in {
    height: auto;  /* this style already exists in bootstrap.css */
    overflow: visible;  /* this one doesn't. Add it! */
}
```
Si vous préférez ne pas modifier Bootstrap CSS (qui peuvent avoir des effets secondaires indésirables, comme indiqué dans les commentaires), vous pouvez ajouter shown et hide des gestionnaires d'événements pour votre #stuff élément à modifier la overflow propriété:
```
$('#stuff').on({
    shown: function(){
        $(this).css('overflow','visible');
    },
    hide: function(){
        $(this).css('overflow','hidden');
    }
});
```
4

J'ai essayé votre solution de contournement avec Bootstrap 2.1.1 et il se casse dans Firefox 16, de travail juste pour la première fois alors pas d'ouverture à tous.

Dans mon cas, le problème était que la première fois qu'un visiteur a ouvert la réductible élément inline hauteur fixe a été appliquée. La deuxième fois, la hauteur est réglée sur auto.

Donc, j'ai trouvé que le problème repose sur le code html pour nav-effondrement élément qui n'a pas un etat a déclaré dans un premier temps:

Voici le code à la première:
```
<div class="nav-collapse">
```
Puis, après l'expansion premier temps bootstrap attribue à hauteur fixe:
```
<div class="nav-collapse in collapse" style="height: 286px;">
```
Et après la fermeture de la première fois de la hauteur à 0:
```
<div class="nav-collapse collapse" style="height: 0px;">
```
D'ouverture de la deuxième fois et il fonctionne très bien avec l'auto-hauteur:
```
<div class="nav-collapse collapse" style="height: auto;">
```
Tellement classe .l'effondrement est nécessaire pour le javascript pour la automatique de la hauteur:
```
<div class="nav-collapse collapse">
```
Il m'a fallu un certain temps à comprendre!
1

Essayez d'utiliser le !important drapeau, comme il semble dans Firefox, les propriétés sont en lecture avec des priorités différentes pour une raison quelconque.

http://jsfiddle.net/t3wFK/2/
```
.in {
    overflow: visible !important;
}
```
1

Je faisais beaucoup de recherches sur ce trouvé une solution à ce problème en ajoutant cette ligne de code dans le css, j'ai trouvé ce à https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202
```
.collapse.in[style="height: auto;"] {overflow: visible;}
```
Cela a fait l'affaire pour moi, espérons que cela fonctionne pour vous

Vous devez vous connecter pour publier un commentaire.