12
votes

Colorbox ne s'ouvre pas à une hauteur correcte lors de la première ouverture

Donc, j'utilise le Colorbox Plugin pour un formulaire de contact. Je ne suis que les propriétés de colorant de couleur par défaut, il devrait donc s'ajuster automatiquement à la Div, il contient (non?).

Eh bien, il y a une petite barre de défilement verticale sur cette teneur en colorant lorsque sa première charge est chargée. Je l'ai vu arriver sporadiquement dans firefox code> et chrome code> pour osx code> p>

tentative # 1 h2>
$("a.modalAutosize").each(function(){
    $(this).colorbox({onOpen: function(){$.fn.colorbox.resize()}});

});


4 commentaires

Pouvez-vous publier le code spécifique qui ouvre la collebox lorsque le lien de contact est cliqué?


Je ne vois pas une barre de défilement dans Firefox.


Le problème semble être plutôt incompatible malheureusement ...


J'ai le même problème. Cela semble se produire complètement au hasard et je n'ai pas été capable de le reproduire ... Avez-vous trouvé une solution définitive?


4 Réponses :


5
votes
$("a.modalAutosize").colorbox({scrolling: false});

1 commentaires

Ça n'aide pas. Parce qu'il n'a pas assez de hauteur à la première fois et que certains contenus ne sont pas visibles. Après la rouvrir - tout est bon. Une idée?



15
votes

J'ai enquêté sur le problème.

Essayez de voir quel contenu vous chargez par Ajax. S'il a des images sans attributs de "hauteur" et "largeur", les barres de défilement peuvent apparaître.

Cela se produit parce que le navigateur ne connaît pas la taille de l'image et n'attend que si elle ne se chargeait pas pour calculer la mise en page de la page. Après la première charge, l'image est dans le cache et que le navigateur peut calculer la taille.

Essayez de spécifier la taille des images. Pour moi ça marche.


0 commentaires

1
votes

J'ai également expérimenté ce problème, sauf que cela se produisait sans aucune des images dans le contenu. J'ai pu le résoudre en définissant la largeur et la hauteur à 100% sur une div enroulant le contenu que je rendu dans la collebox.


0 commentaires

0
votes

Je n'utilisais pas d'images pour que la réponse acceptée ne fonctionnait pas pour moi. En outre, cela ne s'est passé que lors de l'utilisation en ligne: true et semblait éteint à la hauteur du bouton X en bas à droite. Pour le réparer, j'ai ajouté une nouvelle propriété appelée inlineheightJustment code>, puis l'utilise dans la fonction getheight code>.

in jquery.colorbox.js: p>

$(".inlineColorBox").colorbox({
   inline: true,
   inlineHeightAdjustment: 25,
});


0 commentaires