web-dev-qa-db-fra.com

Faire en sorte que JQuery UI Dialog s'agrandisse ou se rétrécisse automatiquement pour s'adapter à son contenu

J'ai une fenêtre de dialogue JQuery UI qui affiche un formulaire. En sélectionnant certaines options sur le formulaire, de nouvelles options apparaissent dans le formulaire, le faisant grandir. Cela peut conduire à un scénario où la page principale a une barre de défilement et la boîte de dialogue de l'interface utilisateur JQuery 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 agrandir (et éventuellement réduire) la boîte de dialogue de l'interface utilisateur JQuery afin 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.

jqueryjquery-uijquery-ui-dialog
126
MikeN

Mise à jour: À partir de l'interface utilisateur 1.8 de jQuery, la solution de travail (comme indiqué 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

136
cgp

La réponse est de définir le

autoResize:true

propriété lors de la création du dialogue. Pour que cela fonctionne, vous ne pouvez définir aucune hauteur pour 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éation ou via n’importe quel style, la propriété autoResize ne fonctionnera pas.

46
MikeN

Cela fonctionne avec jQuery UI v1.10.3

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

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

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

La hauteur est supportée à auto.

La largeur n'est pas!

Pour faire une sorte d’auto, obtenez la taille de la div que vous montrez, puis réglez 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);
    }
2
The Demz
var w = $('#dialogText').text().length;

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

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

1
user596393

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

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

Que .scrollWidth Inclue le remplissage à droite dépend du navigateur (Firefox diffère de Chrome), vous pouvez donc ajouter un nombre de pixels "suffisant" à .scrollWidth, Ou le remplacer par votre propre fonction de calcul de largeur.

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

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

1
Vladimir Kornea