Augmenter la taille de la modale pour Twitter Bootstrap

Question

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

Le formulaire que je rends a probablement besoin de 50px supplémentaires - il ne manque que les boutons.

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

Des idées ?

Answer 1

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

Answer 2

dans Bootstrap 3 :

.modal-dialog{
  width:whatever
}

Answer 3

Vous devez vous assurer qu'il se trouve sur l'élément #myModal .modal-body et pas seulement sur #myModal (quelques personnes font cette erreur) et vous pouvez également tenir compte du changement de hauteur en modifiant les marges de la modale.

Answer 4

L'utilisation de la nouvelle mesure CSS3 "vh" (ou "vw" pour la largeur) (qui définit la hauteur comme une fraction du port d'affichage) :

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

Ainsi, si vous utilisez un cadre réactif, comme Bootstrap, vous pouvez également conserver ce design dans vos fenêtres modales.

Answer 5

En mélangeant deux méthodes pour la largeur et la hauteur, vous obtenez un bon hack :

CSS :

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

JQuery :

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

C'est celui-là que j'utilise. Il résout les problèmes de marge et de barres de défilement pour la largeur et la hauteur, mais il ne redimensionne pas la modale pour l'adapter à son contenu.

J'espère avoir été utile !