Faire en sorte que la boîte de dialogue JQuery UI croisse ou se rétracte automatiquement pour s'adapter à son contenu

Question

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

Comment faire pour que la boîte de dialogue JQuery UI grandisse (et éventuellement rétrécisse) pour toujours adapter 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.

Answer 1

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

width: 'auto' 

---

Utilisez le AutoResize: véritable option. 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

Answer 2

La réponse est de mettre la

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 le dialogue. Donc, si vous définissez une hauteur fixe en pixels pour le dialogue dans sa méthode de création ou via n'importe quel style, la propriété autoResize ne fonctionnera pas.

Answer 3

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

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

fait ce que je avais besoin de faire pour redimensionner la largeur de la boîte de dialogue.

Answer 4

La hauteur est prise en charge automatiquement.

La largeur n'est pas!

Pour faire une sorte d'auto obtenir la taille de la 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); 
    } 

Answer 5

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

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

Answer 6

Cela fonctionne avec jQuery UI v1.10.3

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

Answer 7

Si vous en avez besoin pour travailler dans IE7, vous ne pouvez pas utiliser l'option undocumented, buggy, and unsupported{'width':'auto'}. Au lieu de cela, ajouter ce qui suit à votre .dialog():

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

Que .scrollWidth comprend le rembourrage côté droit dépend du navigateur (Firefox diffère de Chrome), de sorte que vous pouvez ajouter un nombre « suffisant » subjective de pixels .scrollWidth, ou remplacez-le par votre propre fonction de calcul de largeur.

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

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