Ajustez la hauteur de la boîte de dialogue jQueryUI pour qu'elle soit aussi haute que le contenu jusqu'à

En utilisant les boîtes de dialogue de jQueryUI, je souhaite afficher des informations en incrustation. Mon problème est que je veux définir la hauteur de la boîte de dialogue pour que le contenu soit aussi élevé. Si je ne spécifie pas de hauteur, cela fonctionne parfaitement. La hauteur est automatiquement calculée en fonction de la hauteur du contenu. Le problème est alors que si le contenu est très grand, le dialogue devient très grand aussi et passe sous la fenêtre ... maxHeight ne fonctionne pas bien dans ce cas non plus.Ajustez la hauteur de la boîte de dialogue jQueryUI pour qu'elle soit aussi haute que le contenu jusqu'à

J'ai donc été en mesure de résoudre ce problème en ajustant la hauteur et la position après l'affichage de la fenêtre contextuelle. Cependant, pendant que le contenu est chargé (par ajax), il va bien en dessous de l'écran. C'est seulement après avoir fini que je peux réajuster la fenêtre. Je préférerais ne pas avoir ce retard embarrassant.

MISE À JOUR: Transforme Je veux quelque chose à plus qu'un simple maxHeight. Je veux une hauteur maximale INITIALE. Donc, après avoir chargé le dialogue avec des données, il ne peut atteindre qu'une certaine hauteur. Mais après, vous êtes autorisé à élargir la fenêtre. Il est assez facile d'y arriver:

$('<div><div></div></div>').attr('title', options.title).appendTo('body').dialog({ 
    open: function() { 
     $(this).children().css('maxHeight', maxInitialHeight).load(url, function() { 
      thisDialog.$dialog.dialog('option', 'position', 'center'); 
     }); 
    } 
});

Cela va charger dynamiquement une boîte de dialogue « url » avec un contenu jusqu'à une hauteur maxInitialHeight. Les 2 divs imbriqués sont nécessaires.

Source

2010-10-27 at.

Vous pouvez insérer votre contenu à l'intérieur d'un <div class="dialog-data" /> et faire de cette div le contenu de votre boîte de dialogue.

Ensuite, vous pourriez, avec CSS, spécifier un max-height et overflow: auto à votre div.dialog-data.

Source

2010-10-27 11:16:19

Suggestion intéressante car, à première vue, cela provoquerait un div interne qui serait maladroitement plus petit que le dialogue lorsque le dialogue était étendu. Mais ensuite je me suis rendu compte que je voulais que le dialogue global ait une hauteur maximale de toute façon. Donc, je les fais juste ci-dessus ont équivalent (boîte de dialogue doit être de 52 pixels ou plus grand pour la barre de titre) max-hauteurs. Donc, sans test, il semble que votre solution fonctionne. Mais je suppose que ma solution de contournement est plus souhaitable, même avec la fenêtre en expansion folle au début, car elle permet une hauteur maximale INITIALE. Penser comment je pourrais faire la même chose pour votre solution. –

Je poste ma solution ci-dessus qui s'est avérée être un peu simple. Votre suggestion m'a donné l'idée et est proche de la solution, donc je vous créditerai avec la bonne réponse. –

peut-être comme celui-ci

options.open = function() { 
    var dialog = $(this).dialog('widget'); 
    var content = dialog.find('.ui-dialog-content'); 
    $.ajax({ 
     url: 'this your url', 
     success: function(result, status, xhr) { 
      content.empty().append(result); 
      content.dialog(
       'option', 
       { 
        // this your options 
       } 
      ); 
     }; 
    }); 
};

Source

2010-10-27 13:16:52

Je ne comprends pas ce que vous essayez de faire. Est-ce que $ content est identique à $ (this)? Ou est-ce juste du contenu? Dans ce cas, faites-vous un dialogue dans un dialogue? –

Renvoie l'élément .ui-dialog. http://jqueryui.com/demos/dialog/#method-widget –

ok, donc si je comprends bien, en gros vous suggérez de charger l'ajax complètement et ensuite l'ajouter et l'option maxHeight fonctionnera correctement? Peut-être, mais j'ai trouvé une meilleure solution ci-dessus. –

est ici une façon beaucoup plus concise qui travaille pour moi

$(targetElement).css('max-height', '400px').dialog({ 
    'resize' : function() { 
    $(this).css('max-height', '1000px'); 
    } 
});

max hauteur de jeu d'abord sur la chose que vous mettez dans la boîte de dialogue. Il apparaît sur l'écran pas plus grand que 400px. Mais dès que vous commencez à le faire glisser, la restriction est levée. ... juste ce que je voulais, et beaucoup code de nettoyage.

J'ai également essayé de redéfinir "max-height" sur "auto", mais cela n'a pas semblé coller, donc 1000px est OK pour moi.

Source

2011-11-16 12:59:29 dman

Ajustez la hauteur de la boîte de dialogue jQueryUI pour qu'elle soit aussi haute que le contenu jusqu'à

Répondre

Questions connexes