Faire grandir ou réduire automatiquement la boîte de dialogue JQuery UI pour s'adapter à son contenu

J'ai une fenêtre de dialogue d'interface utilisateur JQuery qui affiche un formulaire. En sélectionnant certaines options sur le formulaire, de nouvelles options apparaîtront dans le formulaire, le faisant grossir. Cela peut conduire à un scénario dans lequel la page principale a une barre de défilement et la boîte de dialogue JQuery UI a une barre de défilement. Ce scénario à deux barres de défilement est inesthétique et déroutant pour l'utilisateur.

Comment puis-je faire grandir la boîte de dialogue de l'interface utilisateur JQuery (et éventuellement la réduire) pour qu'elle s'adapte toujours à son contenu sans afficher de barre de défilement? Je préférerais que seule une barre de défilement sur la page principale soit visible.

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

width: 'auto'

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

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

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

La réponse est de définir le

autoResize:true 

propriété lors de la création de la boîte de dialogue. Pour que cela fonctionne, vous ne pouvez pas définir de hauteur pour la boîte de dialogue. Ainsi, si vous définissez une hauteur fixe en pixels pour la boîte de dialogue dans sa méthode de création ou via n'importe quel style, la propriété autoResize ne fonctionnera pas.

Cela fonctionne avec jQuery UI v1.10.3

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

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

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

La hauteur est prise en charge sur auto.

La largeur n'est pas!

Pour faire une sorte d'auto, obtenez la taille du div que vous affichez, 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);
    }

Si vous en avez besoin pour fonctionner dans IE7, vous ne pouvez pas utiliser l' option non documentée, boguée et non prise en charge {'width':'auto'} . Au lieu de cela, ajoutez ce qui suit à votre .dialog():

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

L'inclusion .scrollWidthdu remplissage du côté droit dépend du navigateur (Firefox diffère de Chrome), vous pouvez donc soit ajouter un nombre de pixels subjectif «assez bon» .scrollWidth, soit le remplacer par votre propre fonction de calcul de largeur.

Vous voudrez peut-être inclure width: 0parmi vos .dialog()options, car cette méthode ne diminuera jamais la largeur, augmentez seulement la.

Testé pour fonctionner dans IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 et Opera 22.

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

fait ce dont j'avais besoin pour redimensionner la largeur de la boîte de dialogue.