Comment puis-je faire une boîte de dialogue JQuery UI automatiquement croître ou réduite pour s’ajuster à son contenu ?

Question

J'ai un JQuery UI boîte de dialogue popup qui affiche un formulaire. Par le choix de certaines options sur le formulaire de nouvelles options apparaissent dans le formulaire amenant à grandir. Cela peut conduire à un scénario où la page principale a une barre de défilement et le JQuery UI boîte de dialogue a une barre de défilement. Ces deux barre de défilement scénario est inesthétique et source de confusion pour l'utilisateur.

Comment puis-je faire le JQuery UI dialog grandir (et, éventuellement, réduire) à adapter en permanence son contenu sans afficher une barre de défilement? Je préférerais que seulement une barre de défilement sur la page d'accueil est visible.

Answer 1

Mise à jour : A partir de jQuery UI 1.8, la solution de travail (comme mentionné dans le deuxième commentaire) est d’utiliser :

---

Utilisez l’option autoResize:true. Je vais illustrer :

Voici un exemple : http://jsbin.com/ubowa

Answer 2

La réponse est de mettre le

propriété lors de la création de la boîte de dialogue. Afin que cela fonctionne, vous ne pouvez pas définir n’importe quelle hauteur de la boîte de dialogue. Donc si vous définissez une hauteur fixe en pixels pour la boîte de dialogue dans sa méthode de créateur ou par l’intermédiaire de n’importe quel style la propriété TailleAjustée ne fonctionnera pas.

Answer 3

Cela fonctionne avec l'interface utilisateur jQuery v1.10.3

 $("selector").dialog({height:'auto', width:'auto'});
 

Answer 4

J'ai utilisé la propriété suivante qui fonctionne bien pour moi:

 $('#selector').dialog({
     minHeight: 'auto'
});
 

Answer 5

La hauteur est prise en charge pour auto.

La largeur n'est pas!

Pour faire une sorte de recherche automatique de la taille du div que vous montrez, puis définissez la fenêtre avec.

Dans le code C # ..

 TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }