web-dev-qa-db-fra.com

Comment mettre la barre de défilement uniquement pour modal-body?

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 comme ceci, en gros, il met une barre de défilement autour de modal-dialog entier et non de modal-body qui contient le contenu que j'essaie d'afficher.

L'image ressemble à ceci:

enter image description here

Comment obtenir une barre de défilement autour de modal-body uniquement?

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

csstwitter-bootstrap
133
Subodh Nijsure

Vous devez définir la height du .modal-body dans et lui donner overflow-y: auto. Réinitialisez également .modal-dialog la valeur de dépassement sur initial.

Voir l'échantillon 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;
}
237
Carlos Calla

Si vous ne supportez que IE 9 ou une version ultérieure, vous pouvez utiliser ce CSS qui s'adapte progressivement à la taille de la fenêtre. Vous devrez peut-être modifier légèrement la "200px", en fonction de la hauteur de votre en-tête ou de votre pied de page.

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

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

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

Ajoutant à Carlos Calla bonne réponse.

La hauteur de .modal-body doit être définie, MAIS vous pouvez utiliser des requêtes de support pour vous assurer qu'elle 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; }
}
11
laurakurup

Facultatif : Si vous ne voulez pas que le modal dépasse la hauteur de la fenêtre et utilisez une barre de défilement dans le .modal-body, vous pouvez utiliser cette solution réactive. . Voir une démonstration de travail 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'));
  }
});
10
dimbslmh

Pour Bootstrap versions> = 4.3

Bootstrap 4.3 a ajouté une nouvelle fonctionnalité de défilement intégrée aux modaux. Cela ne fait défiler que modal-body content si la taille du contenu ferait sinon défiler la page. Pour l'utiliser, il suffit d'ajouter la classe modal-dialogue-scrollable au même div qui a la classe modal-dialogue.

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>
6
Kodos Johnson

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

J'ai réussi à faire défiler le corps en fixant la position de l'élément de dialogue modal. Et comme je ne connaissais 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 en sorte que les marges supérieure et inférieure de l'élément de corps modal correspondent à ces hauteurs. Cela a ensuite produit le résultat que je cherchais. J'ai jeté ensemble un violon pour montrer mon travail.

de plus, si vous voulez une boîte de dialogue en plein écran, supprimez simplement le commentaire de 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 le dialogue 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;
}
4
Bogus Hawtsauce

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

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
4
user7695590
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Utilisation de max-height avec vh comme unité sur le modal-body ou d'un div d'emballage à l'intérieur du modal-body. Cela redimensionnera automatiquement la hauteur de modal-body ou de la 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 d'affichage pour la hauteur de la fenêtre.

Compatibilité du navigateur tableau pour vh unité.

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

1
Steven

Ce qui a fonctionné pour moi, c’est de régler la hauteur à 100%, d’avoir le débordement automatique, espérons que cela aidera.

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

Une solution simple en js pour définir la hauteur modale proportionnelle à la taille 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 taille du corps doit être de 100%:

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

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

J'espère que ça aide.

0
migli