web-dev-qa-db-fra.com

Augmenter la taille modale pour Twitter Bootstrap

J'essaie de changer la taille de la forme modale ou plutôt - de la faire répondre au contenu que je présente ici. Je l'utilise pour rendre un formulaire et je préférerais m'occuper du défilement si nécessaire. 

Le formulaire que je rends nécessite probablement un autre 50 pixels - il manque juste les boutons.

J'ai donc essayé de remplacer les styles .modal dans mon fichier application.css.scss (à l'aide de Rails 3.2) mais les décélérations de hauteur maximale et de débordement semblent être remplacées.

Des pensées?

twitter-bootstrap
146
Apie

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 apparaissent uniquement dans la section corps de la boîte de dialogue modale, cela signifie que la hauteur maximale du corps seul doit être ajustée.

113
Rabih Kodeih

dans Bootstrap 3:

.modal-dialog{
  width:whatever
}
33
Mentok

Vous devez vous assurer qu'il est sur l'élément #myModal .modal-body et pas seulement #myModal (quelques personnes commettent cette erreur) et vous pouvez également vous adapter au changement de hauteur en modifiant les marges des modaux.

22
Leon Revill

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.
}

Ainsi, si vous utilisez un framework responsive, tel que Bootstrap, vous pouvez également conserver cette conception dans vos modaux.

18
Chris Paton

Mélangez deux méthodes pour la largeur et la hauteur et vous aurez un bon bidouillage:

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 avoir été utile!

8
pr.nizar

Utilisation d'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;
}
4
xgMz

J'ai eu la réponse ... le problème est que vous avez écrasé l'attribut max-height et amorcer le modal pouvant être redimensionné au-delà de la limite de hauteur de 500px

3
fespinozacast

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

1
Shailender Ahuja

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

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

Tailles en option

Les modaux ont deux tailles optionnelles, disponibles via des classes de modificateurs pour être placées dans un dialogue .modal.

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

Si vous voulez quelque chose de différent, mettez à jour le fichier 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;
  }
}
1
Ali Adravi

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

1
Alfredo Morales Pinzón

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 requièrent des hauteurs différentes lorsque je bascule l'affichage du contrôle à l'intérieur du modal imbriqué, de sorte que je ne pouvais pas appliquer le max-height, au lieu de hauteur: 100% fonctionne bien pour moi.

0
dhruvpatel

N'oubliez pas les classes d'amorçage optionnelles modal-lg et modal-sm si vous souhaitez rester dans la structure responsive. Et ajoutez un correctif au-dessous de votre formulaire, cela peut aider en fonction de votre structure. 

0
JSV

En supposant que votre modal ait un identifiant de modal1, le code CSS suivant augmenterait la hauteur du modal et afficherait tout débordement.

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

Essayé quelques-uns de ce qui précède comme besoin de définir des tailles spécifiques de largeur et de hauteur (pour afficher une image dans un modal) et comme aucun des moyens ci-dessus ne m’a aidé, j’ai décidé de remplacer les styles et d’ajouter ce qui suit au <div> principal qui a class = "modal masquer le fondu masqué" 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 cela correspond parfaitement.

0
FlashTrev

Bootstrap Large modal

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

Bootstrap Petit modal

<div class="modal-dialog modal-sm">
0
Adnan Ahmad

J'essayais récemment ceci et je l'ai bien compris: J'espère que cela vous sera utile

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

Cela ajustera la hauteur de votre modèle.

0
Anjula Ranasinghe