Comment mettre la barre de défilement uniquement pour le corps modal?


165

J'ai l'élément suivant:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Il montre un dialogue modal quelque chose comme ça, en gros, il met la barre de défilement tout autour modal-dialoget non pas modal-bodyqui contient le contenu que j'essaie d'afficher.

L'image ressemble à ceci:

entrez la description de l'image ici

Comment obtenir une barre de défilement modal-bodyuniquement?

J'ai essayé attribuer style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"à modal-bodymais cela n'a pas fonctionné.


1
Veuillez donner un exemple fonctionnel pour mieux vous aider, vous pouvez utiliser bootply.com/new pour le faire.
Carlos Calla

Ensuite, autorisez les blocs d'en-tête et de pied de page de fluide optionnels à l'intérieur du modal afin que seul le corps défile: stackoverflow.com/questions/49173969/…
leontalbot

Réponses:


298

Vous devez régler le heightde l' .modal-bodyentrée et le donner overflow-y: auto. Réinitialisez également la valeur de .modal-dialogdépassement sur initial.

Voir l'exemple de travail:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Merci pour cela. Cela fonctionne très bien. Peut-être que quelque chose n'est pas clair pour moi en css. J'ai essayé d'attribuer la hauteur maximale du corps modal: 65% qui ne fonctionne pas. La solution que vous avez fournie ne fonctionne que si j'attribue une hauteur fixe à modal-body. N'y a-t-il aucun moyen de dire que le dialogue modal prend 85% de la fenêtre et que le corps modal devrait occuper, disons, 90% du dialogue modal? Mais encore une fois, la solution que vous avez fournie fonctionne pour moi, pour l'instant. Merci!
Subodh Nijsure

3
@SubodhNijsure Désolé pour la réponse tardive. Vous ne pouvez pas définir la hauteur en% car cela signifie un% de son parent, dans ce cas le parent est .modal-content et sa hauteur dépend de ses enfants. C'est pourquoi cela ne fonctionnera que si vous définissez l'une d'entre elles. Soit vous définissez la hauteur du contenu .modal, soit vous définissez la hauteur du corps .modal. Si vous définissez la hauteur du contenu .modal, vous pourrez définir la hauteur de .modal-body en% et ce sera un% de son parent, donc si vous le définissez à moins de 100%, il y aura un espace vide à la en bas, puisque vous ne remplissez pas toute la hauteur du .modal-content.
Carlos Calla

Gardez à l'esprit que le initialmot - clé CSS ne fonctionne pas pour Internet Explorer, bien qu'il fonctionne pour Edge.
trysis

18
juste un petit pointeur: au lieu de "hauteur 250px" qui pourrait sembler moche sur certains téléphones qui ne font que 230 px de hauteur, ou moins avec la barre de navigation en paysage: utilisez simplement max-height: 80vh;80% de la hauteur totale de la fenêtre et uniquement pour la hauteur maximale, pas si elle est un petit popup
Toskan

1
fonctionne bien, mais après avoir fermé le modal, les liens de la fenêtre «parent» ne sont plus cliquables ... résolu avec le code suivant: .modal .modal-body {max-height: 420px; débordement-y: auto; }
cwhisperer

119

Si vous ne supportez que IE 9 ou supérieur, vous pouvez utiliser ce CSS qui s'adapte facilement à la taille de la fenêtre. Vous devrez peut-être modifier le "200px" cependant, en fonction de la hauteur de votre en-tête ou pied de page.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Selon [1] et [2], ceci est également pris en charge par Chrome, Firefox et Safari. [1] developer.mozilla.org/en-US/docs/Web/CSS/… [2] developer.mozilla.org/en-US/docs/Web/CSS/…
ctron

Remarque: Cette solution fait apparaître le popover sous l'en-tête ou le pied de page en fonction de l'option sélectionnée en haut ou en bas Voir ce violon que j'ai créé: jsfiddle.net/2qeo99k3/4 Sans le hack css cela fonctionne très bien, supprimez-le simplement dans le violon pour voir ça marche
Marc Roussel

Une solution de contournement pour le popover peut être trouvée ici: stackoverflow.com/questions/45666828/…
Marc Roussel

37

Problème résolu avec la solution combinée @carlos calla et @jonathan marston.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

20

Pour les versions Bootstrap> = 4.3

Bootstrap 4.3 a ajouté une nouvelle fonction de défilement intégrée aux modaux. Cela fait uniquement défiler le contenu du corps modal si la taille du contenu ferait autrement défiler la page. Pour l'utiliser, ajoutez simplement la classe modal-dialog-scrollable au même div qui a la classe modal-dialog .

Voici un exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


14

En plus de la bonne réponse de Carlos Calla .

La hauteur de .modal-body doit être définie, MAIS vous pouvez utiliser des requêtes multimédias pour vous assurer qu'il convient à la taille de l'écran.

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Il est erroné de supposer que la hauteur sera de 400 pixels ou plus sur un appareil mobile. Utiliser la largeur pour déterminer la hauteur n'est pas du tout une solution réalisable. Il y a trop de cas d'utilisation qui provoqueraient cette rupture.
Fraise du

2
@Strawberry il a en fait utilisé min-height (pas min-width) et s'est assuré que la hauteur donnée est inférieure à la min-height dans la requête multimédia. De plus, il ne donne qu'un exemple à son idée car la requête média peut beaucoup varier en fonction de ce que l'OP souhaite réaliser.
Carlos Calla

12

Facultatif : si vous ne voulez pas que le modal dépasse la hauteur de la fenêtre et utilise une barre de défilement dans le corps .modal, vous pouvez utiliser cette solution réactive. Voir une démo fonctionnelle ici: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

5

Je sais que c'est un vieux sujet, mais cela peut aider quelqu'un d'autre.

J'ai pu faire défiler le corps en fixant la position de l'élément de dialogue modal. Et comme je ne saurais jamais la hauteur exacte de la fenêtre du navigateur, j'ai pris les informations dont j'étais sûr, la hauteur de l'en-tête et du pied de page. J'ai ensuite pu faire correspondre les marges supérieure et inférieure de l'élément modal-body à ces hauteurs. Cela a alors produit le résultat que je recherchais. J'ai jeté un violon pour montrer mon travail.

aussi, si vous voulez une boîte de dialogue plein écran, annulez simplement la largeur: auto; dans la section .modal-dialog.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Et voici le css que j'ai utilisé pour modifier la boîte de dialogue de bootstrap.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

5

Ou plus simplement, vous pouvez mettre entre vos balises d'abord, puis dans la classe css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

1
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Utilisation max-heightavec vhcomme unité sur le modal-bodyou un div d'emballage à l'intérieur du modal-body. Cela redimensionnera modal-bodyautomatiquement la hauteur ou le div d'habillage (dans cet exemple) lorsqu'un utilisateur redimensionnera la fenêtre.

vh est l'unité de longueur représentant 1% de la taille de la fenêtre pour la hauteur de la fenêtre.

Tableau de compatibilité du navigateur pour l' vhunité.

Exemple: https://jsfiddle.net/q3xwr53f/


1

Ce qui a fonctionné pour moi, c'est de régler la hauteur à 100%, le dépassement automatique en espérant que cela aidera

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

0

Une solution js simple pour définir la hauteur modale proportionnelle à la hauteur du corps:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

la hauteur du corps doit être de 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Je règle la hauteur modale du corps à 80% du corps, cela peut bien sûr être personnalisé.

J'espère que ça aide.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.