web-dev-qa-db-fra.com

Définir la hauteur de corps modale de bootstrap en pourcentage

J'essaie de créer un modal avec un corps qui défilera lorsque le contenu deviendra trop volumineux. Cependant, je veux que le modal soit sensible à la taille de l'écran. Lorsque je règle la hauteur maximale à 40%, cela n’a aucun effet. Toutefois, si je règle la hauteur maximale à 400 pixels, il fonctionne comme prévu, mais ne répond pas. Je suis sûr que quelque chose de simple me manque, mais je n'arrive pas à le faire fonctionner.

Voici un exemple

Ne fonctionne pas:

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Travaux:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}
htmlcsscss3twitter-bootstrapmodal-dialog
22
thraxst

Cela a fonctionné pour moi

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

39
Mehmet Ataş

Au lieu d'utiliser un%, les unités vh le définissent à un pourcentage de la taille de la fenêtre d'affichage (fenêtre du navigateur). 

J'ai été en mesure de définir un modal avec une image et du texte ci-dessous pour répondre à la taille de la fenêtre du navigateur à l'aide de vh.

Si vous souhaitez simplement que le contenu défile, vous pouvez omettre la partie qui limite la taille du corps modal.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}
25
Ryan

Cela devrait fonctionner pour tout le monde, toutes les résolutions d'écran:

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

Tout d’abord, comptez votre hauteur d’en-tête et de pied de page modale. Dans mon cas, j’ai le titre H4, donc je les ai sur 141px, qui compte déjà la marge modale par défaut dans 20px(top+bottom).

Donc, soustraire 141px est le max-height pour ma hauteur modale; pour un meilleur résultat, il existe des bordures en haut et en bas de 1px; pour cela, 143px fonctionnera parfaitement.

Dans certains cas, vous pouvez utiliser overflow-y: auto; au lieu de overflow-y: scroll;, essayez-le.

Essayez-le et vous obtiendrez le meilleur résultat, à la fois sur un ordinateur ou sur un appareil mobile… Si votre en-tête est plus grand que H4, recomptez-le et voyez combien px vous souhaitez soustraire.

Si vous ne savez pas ce que je dis, changez simplement le nombre de 143px, voyez quel est le meilleur résultat pour votre cas.

Enfin, je suggère d'avoir un CSS en ligne.

6
bard

Vous avez sans doute déjà résolu ce problème ou décidé de faire quelque chose de différent, mais comme aucune réponse n’a été donnée et que j’ai trébuché lorsque je recherchais quelque chose de similaire, j’ai pensé partager ma méthode.

J'ai commencé à utiliser deux ensembles div. On a hidden-xs et est destiné à la visualisation de périphériques sm, md & lg. L'autre a hidden-sm, -md, -lg et est uniquement pour mobile. Maintenant, j'ai beaucoup plus de contrôle sur l'affichage dans mon CSS.

Vous pouvez voir une idée approximative dans ce js fiddle où je règle le pied de page et les boutons pour qu’ils soient plus petits lorsque la résolution est de la taille -xs.

  <div class="modal-footer">
      <div class="hidden-xs">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      <div class="hidden-sm hidden-md hidden-lg sml-footer">
    <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-xs btn-primary">Save changes</button>
      </div>
  </div>
3
VictorySaber

La solution scss pour Bootstrap 4.0

.modal { max-height: 100vh; .modal-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } }

Assurez-vous que le .modalmax-height est 100vh. Ensuite, pour .modal-body, utilisez la fonction calc() pour calculer la hauteur souhaitée. Dans le cas ci-dessus, nous voulons occuper le 80vh de la fenêtre, réduit de la taille de l'en-tête et du pied de page en pixels. Cela correspond à environ 140 pixels, mais vous pouvez le mesurer facilement et appliquer vos propres valeurs personnalisées. Pour modal plus petit/plus grand, modifiez 80vh en conséquence.

0
lokers