faire manuellement jQuery boîte de dialogue vérifier si le redimensionnement est nécessaire

Question

J'ai une boîte de dialogue jQuery qui charge son contenu par ajax après son ouverture.

Voir ce JSFiddle (le contenu n'est pas chargé par ajax mais ajouté après ouverture, ce qui est suffisant pour 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 que je peux appeler après avoir ajouté du contenu à la boîte de dialogue?

Je préfère ne pas avoir à déterminer manuellement si un redimensionnement est nécessaire et à quelle hauteur car il est presque déjà intégré dans le plugin ui.

Answer 1

JSFiddle exemple.

Pas exactement la solution élégante que j'espérais mais jusqu'à présent cela semble fonctionner.

Si quelqu'un a une meilleure solution, je serai heureux de l'entendre.

Answer 2

Placez le code html dans un div réel sur le webapge, puis utilisez le dialogue sur ce div. Ou changer la hauteur (et d'autres options) après initialisation ... de jquery docs:

//getter 
var width = $(".selector").dialog("option", "height"); 
//setter 
$(".selector").dialog("option", "height", 460); 

Answer 3

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 un dialogue, il devient imbriqué dans la div de dialogue avec un div en-tête. Par conséquent, le div de test et son div contenant doivent tous deux avoir leurs hauteurs définies avec le div contenant en tenant compte de la hauteur de l'en-tête de dialogue. Régler sa hauteur sur auto devrait prendre soin de cela.