Augmenter la taille modale pour Twitter Bootstrap

J'essaie de changer la taille du formulaire modal ou plutôt de le faire répondre au contenu que j'y rend. Je l'utilise pour rendre un formulaire et préférerais gérer moi-même le défilement si nécessaire.

Le formulaire que je rend a probablement besoin d'un autre 50px - il manque juste les boutons.

J'ai donc essayé de remplacer les styles .modal dans mon fichier application.css.scss (Utilisation de Rails 3.2) mais les déclinaisons max-height et overflow semblent être écrasées.

Des pensées?

J'avais exactement le même problème, vous pouvez essayer:

.modal-body {
    max-height: 800px;
}

Si vous remarquez que les barres de défilement n'apparaissent que sur la section du corps de la boîte de dialogue modale, cela signifie que la hauteur maximale du corps doit être ajustée uniquement.

dans Bootstrap 3:

.modal-dialog{
  width:whatever
}

Vous devez vous assurer qu'il se trouve sur l'élément #myModal .modal-body et pas seulement sur #myModal (vu que quelques personnes font cette erreur) et vous pouvez également accepter le changement de hauteur en modifiant les marges modales.

En utilisant la nouvelle mesure CSS3 'vh' (ou 'vw' pour la largeur) (qui définit la hauteur comme une fraction du port de vue), utilisez:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

De cette façon, si vous utilisez un framework réactif, comme Bootstrap, vous pouvez également conserver cette conception dans vos modaux.

Mélanger deux méthodes pour la largeur et la hauteur et vous avez un bon hack:

CSS:

#myModal .modal-body {max-height: 800px;}

JQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

Celui-ci est celui que j'utilise. Il corrige les problèmes de marge et de barre de défilement pour la largeur et la hauteur, mais il ne redimensionnera pas le modal pour l'adapter à son contenu.

J'espère que j'ai été utile!

En utilisant une classe CSS (vous pouvez également remplacer le style - non suggéré):

(html)

<div class="modal-body custom-height-modal" >

(css)

.custom-height-modal {
  height: 400px;
}

J'ai la réponse ... le fait est que vous avez écrasé l'attribut max-height pour que le modal bootstrap puisse être redimensionné au-delà de la limite de hauteur de 500px

Bootstrap Grand modèle

<div class="modal-dialog modal-lg">

Bootstrap Petit modèle

<div class="modal-dialog modal-sm">

Il suffit de définir la hauteur de ".modal-body": 100%, il ajustera automatiquement la hauteur en fonction de votre contenu et de mettre "max-height" selon votre écran ...

Avez-vous essayé le paramètre de taille:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

Tailles optionnelles

Les modaux ont deux tailles optionnelles, disponibles via des classes de modificateurs à placer dans une boîte de dialogue .modal.

1. par défaut: 600px
2. sm: petit, largeur de 300 px
3. lg: grand, largeur de 900px

Si vous voulez quelque chose de différent, mettez à jour le bootstarp.css

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Pour Boostrap> 4, cela a fonctionné pour moi:

.modal-content{
  width: 1200px;
}

une version plus avancée:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

voici un codepen:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

En supposant que votre modal a un identifiant du modal1CSS suivant, cela augmenterait la hauteur du modal et afficherait tout débordement.

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

J'ai essayé quelques-uns des éléments ci-dessus pour définir des tailles spécifiques de largeur et de hauteur (pour afficher une image dans un modal) et comme aucun des éléments ci-dessus ne m'a aidé, j'ai décidé de remplacer les styles et j'ai ajouté ce qui suit au <div> principal qui a class = "masque modal fondu" dedans: c'est-à-dire ajouté une largeur à la balise de style pour l'arrière-plan du modal.

style="display: none; width:645px;"

puis ajouté les balises 'style' suivantes au corps modal:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

fonctionne comme un charme maintenant, j'affiche une image et maintenant ça va parfaitement.

Cela a fonctionné pour moi:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Notez que dans mon cas, j'ai des modaux imbriqués, chacun ayant des contrôles qui nécessitent des hauteurs différentes lorsque je bascule l'affichage du contrôle à l'intérieur du modal imbriqué , donc je ne pouvais pas appliquer la hauteur maximale , au lieu de la hauteur: 100% fonctionne bien pour moi.

N'oubliez pas les classes de bootstrap facultatives modal-lget modal-smsi vous souhaitez rester dans le cadre réactif. Et ajoutez un clearfix sous votre formulaire, qui peut aider en fonction de votre structure.

J'ai récemment essayé ceci et j'ai obtenu ceci correctement: j'espère que cela sera utile

 .modal .modal-body{
        height: 400px;
    }

Cela ajustera la hauteur de votre modèle.

Voici une autre méthode simple pour augmenter la taille du modal bootstrap:

$(".modal-dialog").css("width", "80%");

La largeur du modal peut être spécifiée en termes de pourcentage de l'écran. Dans l'exemple ci-dessus, je l'ai réglé à 80% de la largeur de mon écran.

Voici un exemple de travail de la même chose:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>