web-dev-qa-db-fra.com

Liste déroulante Bootstrap réduite par un débordement: conteneur masqué, comment modifier le conteneur?

À l’aide de bootstrap, j’ai un menu déroulant (s) à l’intérieur de div avec overflow:hidden, ce qui est nécessaire pour être comme ça. Cela a entraîné le découpage des listes déroulantes par le conteneur.

Ma question, comment puis-je résoudre ce problème de découpage, par exemple changer le conteneur de toutes les listes déroulantes de mon projet pour qu'il soit body, avec le coût le plus bas possible?

voici un exemple de code: http://jsfiddle.net/0y3rk8xz/

htmlcsstwitter-bootstrap
30
AlBaraa Sh

si quelqu'un souhaite une solution de contournement, la liste déroulante d'amorçage comporte un événement show.bs.dropdown que vous pouvez utiliser pour déplacer l'élément déroulant en dehors du conteneur overflow:hidden. 

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

il existe également un événement hidden.bs.dropdown si vous préférez déplacer l'élément à son emplacement d'origine une fois la liste déroulante fermée:

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

Voici un exemple de travail: 

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

28
Conrad Warhol

Définissez la propriété div sur overflow:visible; ou Définissez Position:absolute; sur la classe .dropdown de la manière suivante: 

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

Voir le code de travail: http://jsfiddle.net/guruWork/3x1f8ng5/

6
Guru

Ma solution consistait à utiliser le positionnement statique dans la liste déroulante. J'ai eu la liste déroulante à l'intérieur d'une table d'amorçage avec débordement caché.

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

Cela n'a pas fonctionné avec votre violon, cependant. Je ne suis donc pas sûr que ma solution ait quelque chose à voir avec les tables bootstrap. Quoi qu’il en soit, cela donnera peut-être à quelqu'un quelque chose de nouveau à essayer.

2
Jacob Colvin

Je faisais face au même problème et après des heures de recherche. J'ai créé un gestionnaire d'événements pour intercepter le menu déroulant, obtenir les positions et l'attacher de manière dynamique. afin qu'il ne soit pas coupé. 

Voici le code simple que j'ai utilisé. Essayez si cela aide. 

$('.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");
  }
2
Chait

J'ai eu une sorte de problème de défilement avec la plupart des solutions dans cette question et d'autres que j'ai vu sur SO. Ce qui a bien fonctionné pour moi, c’était de faire la position déroulante inherit:

.dropdown {
  position: inherit;
}

Et définissez ensuite la position dropdown-menu à l'aide de 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"
  });
});

Voici un exemple de travail: http://jsfiddle.net/ck66ee9q/

2
Helder Pereira

Vous pouvez aussi essayer celui-ci en remplaçant yourDivId par l'id de votre div.

$('.dropdown').on('show.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'visible');
});

$('.dropdown').on('hidden.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'hidden');
});
1
PILABRE MIKAILA

J'ai rencontré le même problème, avec le besoin d'avoir overflow:hidden défini, mais que le menu déroulant ne soit pas tronqué.

Cependant, ma situation impliquait le Bootstrap Carousel , alors j’ai décidé qu’une solution valide rendrait le débordement visible uniquement lorsque le menu déroulant est ouvert et qu’il se ferme, le débordement peut redevenir masqué. Cette solution pourrait fonctionner pour d'autres, alors je la partage.

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

Notez que cela ne vérifie pas que la clé Esc est utilisée pour fermer la liste déroulante, mais dans mon cas, ce n'était pas un problème. Ma propre version utilise une classe pour appliquer le style que certains développeurs préfèrent au lieu de modifier le CSS en ligne.

0
mikeapr4

Toutes les suggestions qui ont été faites ici manquent en quelque sorte et je ne pourrais pas les faire fonctionner correctement. Donc, j'ai fait celui-ci basé sur toutes les suggestions et fonctionne très bien pour moi.

J'ai utilisé une autre classe ici pour faire la différence avec les éléments de liste déroulante habituels que je pourrais vouloir faire fonctionner de manière classique.

$(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();

});
0
Simsek Mert

J'avais un élément div avec une classe Bootstrap panel contenant DevExpress ComboBoxes contenu dans des éléments div avec des classes Bootstrap col-lg. 

J'ai eu un problème de couleur de fond panel ou de couleur de bordure se fondant au div ci-dessus. Pour résoudre ce problème, j’ai ajouté overflow:hidden; à la panel, mais cela a entraîné la fermeture du menu déroulant de la ComboBox. J'ai ajouté style="position: inherit" à ces éléments div dans la panel contenant les ComboBox et cela a résolu le problème.

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

Cette solution, j'ai trouvé ici .

0
Dov Miller