faire manuellement le contrôle de jQuery si Redimensionner est nécessaire
-
28-09-2019 - |
Question
J'ai une boîte de dialogue jQuery qui charge son point bas contenu ajax après son ouverture.
Voir cette jsFiddle (contenu n'est pas chargé creux ajax mais il a ajouté après ouvert, ce qui est assez pour démontrer mon problème).
html:
<div id="test">test</div>
js:
$("#test").dialog({
minHeight:100,
maxHeight:200,
width:300,
open: function(){
$(this).html("test<br /><br />test<br />" +
"<br />test<br /><br />test" +
"<br /><br />test<br /><br />" +
"test<br /><br />test<br />" +
"<br />test<br /><br />test");
}
});
Quand il est ouvert, il ne reste pas fidèle à son maxHeight
jusqu'à ce que vous redimensionnez la boîte de dialogue. Y at-il une sorte de méthode resize
je peux appeler après avoir ajouté du contenu à la boîte de dialogue?
Je préfère ne pas avoir à comprendre manuellement si un redimensionnement est nécessaire et à quelle hauteur depuis son à peu près déjà construit dans le plug-in ui.
La solution 2
jsFiddle exemple.
Pas exactement la solution élégante que je l'espérais, mais jusqu'à présent, il semble fonctionner.
Si quelqu'un a une meilleure solution que je serai heureux de l'entendre.
Autres conseils
Mettre le code html dans une div réelle sur la webapge, puis utilisez le dialogue sur ce div. Ou à la hauteur du changement (et d'autres options) après initialisation ... à partir de jquery docs :
//getter
var width = $( ".selector" ).dialog( "option", "height" );
//setter
$( ".selector" ).dialog( "option", "height", 460 );
Réglage de la maxHeight dans la fonction ouverte semble faire l'affaire:
$("#test").dialog({
minHeight:100,
width:300,
open: function(){
$(this).html("test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test");
$(this).parent().css("height", "auto");
$(this).css("maxHeight", 200);
}
});
EDIT: Il apparaît lorsque le div « test » est utilisé comme une boîte de dialogue, il devient imbriqué dans la div dialogue avec un div d'en-tête. En conséquence à la fois la div d'essai et son contenant besoin div d'avoir leurs hauteurs définies avec les contenant div prise en compte la hauteur de la div d'en-tête de dialogue. Réglage de la hauteur à l'auto devrait prendre soin de cela.