web-dev-qa-db-fra.com

Corps modal bootstrap hauteur maxi 100%

J'ai un corps modal d'amorçage de taille personnalisée (80% de la largeur en largeur) et il défile (le contenu du corps débordera sur certains écrans de taille)

Il y a 2 problèmes:

  1. Je ne peux pas définir la hauteur maximale à 100%, car cela correspond à 100% du document entier au lieu de la hauteur maximale du conteneur, ce dont j'ai besoin pour que le défilement fonctionne correctement.
  2. S'il y a une div ayant une hauteur fixe à l'intérieur du corps modal à la toute fin, elle débordera en dehors de la modale si l'écran n'est pas assez grand pour le contenu.

Comment pourrais-je résoudre ce problème? J'expérimente actuellement des marges négatives, mais je ne les connais pas trop.

Les solutions JavaScript sont acceptables (jQuery est disponible ainsi que backbone.js)

Merci

Edit: Capture d'écran fournie

enter image description here

Edit 2: More screenshot

enter image description here

javascriptcsshtml5twitter-bootstrap
13
Pwnna

J'ai cédé et écrit coffeescript pour résoudre ce problème. Si quelqu'un est intéressé, voici le coffeescript:

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

Ou le javascript équivalent tel que généré ci-dessus.

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
8
Pwnna

J'ai fait face au même problème avec une forme longue. Javascript n'étant pas une option pour moi, je me suis retrouvé avec une solution entièrement HTML-CSS.

L'objectif principal était de le coder en utilisant uniquement des pourcentages, afin de disposer d'un moyen simple de créer les requêtes multimédia.

Je l'ai testé avec Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 et IE8. Voici la démo .

Structure HTML modale:

La clé est d’avoir les divisions structurelles propres de padding/margin/border. Tous ces styles doivent être appliqués aux éléments qu’ils contiennent.

<div id="dialog" class="modal hide dialog1" aria-hidden="false">
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div>
        </div>
    </div>
</div>

Modes:

Les styles appliqués à ces divs de structure sont ceux qui déterminent sa taille.

.modal.dialog1 { /* customized styles. this way you can have N dialogs, each one with its own size styles */
    width: 60%;
    height: 50%;
    left: 20%; /* ( window's width [100%] - dialog's width [60%] ) / 2 */
}

/* media query for mobile devices */
@media ( max-width: 480px ) {
    .modal.dialog1 {
        height: 90%;
        left: 5%; /* ( window's width [100%] - dialog's width [90%] ) / 2 */
        top: 5%;
        width: 90%;
    }
}

/* split the modal in two divs (header and body) with defined heights */
.modal .modal-header {
    height: 10%;
}

.modal .modal-body {
    height: 90%;
}

/* The div inside modal-body is the key; there's where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

Pour un code plus détaillé, reportez-vous à la démo , où vous verrez des classes de style entières et les styles d'amorçage à désactiver/remplacer.

6
lluisaznar

essayez ce Bootstrap Modal v2.1

https://github.com/jschr/bootstrap-modal

4
GianFS

Il vous suffit de définir la hauteur du menu contextuel modal à son émission, d'obtenir la hauteur de l'écran/de la fenêtre et de le définir à la hauteur de modal. (Vous pouvez le multiplier par 0,8 pour obtenir une hauteur d'écran de 80%, ce qui convient parfaitement).

$('#YourModalId').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    var _height = $(window).height()*0.8;
    $('.modal .modal-body').css('max-height', _height);
});
3
Deevan

Voici une solution Sass pleinement opérationnelle, mais elle nécessite flexbox.

  // don't clamp modal height when screen is shorter than 400px
  // .modal-body is short in that case, and the default behavior
  // (entire modal will scroll) is easier to use
  @media(min-height:400px)
    .modal
      // use top/bottom margin here instead of .modal-dialog
      // so that .modal-dialog can use height: 100%
      margin: 30px
      // without overflow: visible the shadow will be clipped
      // at the bottom
      overflow: visible

      > .modal-dialog
        margin: 0 auto
        // height must be explicitly set for .modal-content to
        // use percentage max-height
        height: 100%

        > .modal-content
          display: flex
          flex-direction: column
          max-height: 100%

          > .modal-header,
          > .modal-footer,
            // don't allow header/footer to grow or shrink
            flex: 0 0 auto

          > .modal-body
            // allow body to shrink but not grow
            flex: 0 1 auto
            // make body scrollable instead of entire modal
            overflow-y: auto
2
Andy

Pour faire suite à la réponse de pwnna, ce code fonctionne mieux pour moi car il fonctionne avec une hauteur variable en fonction de la taille du contenu, ainsi qu'une hauteur maximale et qu'il s'exécute également en charge, au lieu de simplement redimensionner. 

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
2
tsdexter

vous devriez essayer de le positionner absolument dans un élément dont la position est définie sur relative. Là, vous pouvez travailler avec quelque chose comme

{
    bottom:0;
    top:0;
    left:0;
    right:0;
0
Luke

Faites en sorte que les éléments html et body remplissent la fenêtre:

html, body { height: 100%; }

Maintenant, vous pouvez utiliser max-height: 100% sur l'élément à l'intérieur du corps et ce sera 100% de la fenêtre car l'élément body est maintenant la taille de la fenêtre.

0
Guffa

Ce code 

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

Ecrit par tsdexter , cela a fonctionné pour moi!

0
Daniel de Lima

La réponse de Pwnna a un bon concept, bud ne fonctionne pas pour moi ... Voici une solution qui fonctionne pour moi:

fit_modal_body = function (modal, padding) {
    var windowHeight = $(window).height();
    var modalHeight = modal.height();

    var dif = windowHeight - (modalHeight + 2*padding);
    var modalBody = $(".modal-body:first", modal);
    modalBody.css("max-height", modalBody.height() + dif);
};

resizeLastWindow = function () {
    fit_modal_body($(".modal-dialog:last"), 15);
};

$(window).resize(resizeLastWindow);

Cela dépend de css:

.modal-body {
    overflow-y: auto; 
}
0
elnino3800