Modal à défilement Twitter

J’utilise twitter bootstrap pour un projet sur lequel je travaille.

J’ai une fenêtre modale qui a une forme un peu plus longue et je n’aimais pas ça quand la fenêtre était trop petite, le modal ne défilait pas (s’il disparaissait simplement de ma page qui ne défilait pas).

Pour résoudre ce problème, j’ai utilisé le css suivant

.modal { overflow-y:auto; max-height:90%; margin-top:-45%; } 

Cela fonctionne exactement comme je le souhaite dans Chrome (c’est-à-dire que la forme est pleine lorsque la fenêtre est suffisamment grande, mais que la fenêtre se rétrécit, le modal se réduit et devient défilable). Le problème est que dans IE, le modal est hors écran. Quelqu’un at-il une meilleure solution à ce problème?

Mon exemple peut être trouvé sur tinyhousemap.com (cliquez sur “Ajouter une entrée à la carte” dans la fenêtre de navigation pour que le modal apparaisse)

Merci

Que diriez-vous de la solution ci-dessous? Cela a fonctionné pour moi. Essaye ça:

 .modal .modal-body { max-height: 420px; overflow-y: auto; } 

Détails:

  1. supprimer overflow-y: auto; ou overflow: auto; de la classe .modale (important)
  2. supprimer max-height: 400px; de la classe .modal (important)
  3. Ajouter max-height: 400px; to .modal -modal-body (ou quoi que ce soit, peut être 420px ou moins, mais n’irait pas plus de 450px )
  4. Ajouter overflow-y: auto; à .modal .modal-body

Fait, seul le corps défilera.

J’ai fait une solution minuscule en utilisant uniquement jQuery.

Tout d’abord, vous devez append une classe supplémentaire à votre

j’ai appelé “ativa-scroll”, de sorte que cela devienne quelque chose comme ceci:

Alors maintenant, placez simplement ce morceau de code sur votre page, près de votre chargement JS:

  

Je travaille parfaitement pour moi, également de manière réactive! 🙂

 /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; } 

Cela fonctionne pour Bootstrap 3 sans code JS et est réactif.

La source

Essayez et remplacez les bootstrap:

  .modal { position: fixed; 

Avec:

 .modal { position: absolute; 

Cela a fonctionné pour moi.

J’ai aussi ajouté

 .modal { position: absolute; } 

à la feuille de style pour permettre au dialog de défiler, mais si l’utilisateur est descendu au bas d’une longue page, le modal peut se retrouver caché au sumt de la zone visible.

Je comprends que ce n’est plus un problème dans bootstrap 3, mais à la recherche d’une solution relativement rapide jusqu’à ce que nous procédions à la mise à niveau, je me suis retrouvé avec ce qui précède et en appelant les éléments suivants avant d’ouvrir le modal.

 $('.modal').css('top', $(document).scrollTop() + 50); 

Semble être heureux dans FireFox, Chrome, IE10 8 et 7 (les navigateurs que je devais donner)

Votre modal est caché dans Firefox, à cause de la déclaration de marge négative que vous avez dans votre feuille de style générale:

 .modal { margin-top: -45%; /* remove this */ max-height: 90%; overflow-y: auto; } 

Supprimez la marge négative et tout fonctionne correctement.

Le problème avec la solution CSS de @ grenoult (qui fonctionne surtout) est qu’elle est entièrement réactive et mobile lorsque le clavier s’affiche (c.-à-d. Quand il clique sur une entrée de la boîte de dialog modale). la taille change et elle peut masquer l’entrée sur laquelle ils viennent de cliquer pour ne pas voir ce qu’ils tapent.

La meilleure solution pour moi était d’utiliser jquery comme suit:

 $(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" }); 

Il n’est pas sensible à la modification de la taille de la fenêtre, mais cela ne se produit pas souvent de toute façon.

J’ai été capable de surmonter cela en utilisant la mésortingque “vh” avec max-height sur l’élément .modal-body. 70vh a regardé de près pour mes utilisations. Réglez ensuite le débordement-y sur auto pour qu’il ne défile que lorsque cela est nécessaire.

 .modal-body { overflow-y: auto; max-height: 70vh; } 

Rien de tout cela ne fonctionnera comme prévu. La manière correcte est de changer de position: fixé à la position: absolu pour la classe .modal

En cas d’utilisation de .modal {overflow-y: auto;} , créer une barre de défilement supplémentaire à droite de la page, lorsque le corps est déjà débordé.

La solution consiste à supprimer temporairement le débordement de la balise body et à définir le dépassement modal y sur auto .

Exemple:

 $('.myModalSelector').on('show.bs.modal', function () { // Store initial body overflow value _initial_body_overflow = $('body').css('overflow'); // Let modal be scrollable $(this).css('overflow-y', 'auto'); $('body').css('overflow', 'hidden'); }).on('hide.bs.modal', function () { // Reverse previous initialization $(this).css('overflow-y', 'hidden'); $('body').css('overflow', _initial_body_overflow); });