Redimensionner automatiquement dialogue UI jQuery à la largeur du contenu chargé par ajax

Question

Je vais avoir beaucoup de mal à trouver des informations spécifiques et des exemples sur ce. J'ai un certain nombre de jQuery UI boîtes de dialogue dans mon application attaché à divs qui sont chargés avec .ajax() appelle. Ils utilisent tous le même appel de la configuration:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

Je veux juste avoir de la boîte de dialogue redimensionner à la largeur du contenu qui est chargé. Maintenant, la largeur reste simplement à 300px (valeur par défaut) et j'ai une barre de défilement horizontale.

Aussi loin que je peux dire, "autoResize" n'est plus une option pour les dialogues, et rien ne se passe quand je le spécifier.

J'essaie de ne pas écrire une fonction distincte pour chaque boîte de dialogue, donc, .dialog("option", "width", "500") n'est pas vraiment une option, comme chaque boîte de dialogue va avoir une largeur différente.

La spécification width: 'auto' pour la boîte de dialogue options tout à fait les boîtes de dialogue de prendre jusqu'à 100% de la largeur de la fenêtre du navigateur.

Quelles sont mes options? J'utilise jQuery 1.4.1 avec jQuery UI 1.8rc1. Il semble que ce devrait être quelque chose qui est vraiment facile.

EDIT: j'ai mis en place une encombrants solution de contournement pour ce problème, mais je suis toujours à la recherche d'une meilleure solution.

Answer 1

J'ai juste écrit un petit exemple d'application à l'aide de JQuery 1.4.1 et de l'INTERFACE utilisateur 1.8rc1. J'ai tout de spécifier le constructeur:

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

Je sais que vous avez dit que cela prend 100% de la largeur de la fenêtre du navigateur, mais il fonctionne doux ici, testé dans FF3.6, Chrome et IE8.

Je ne fais pas les appels AJAX, juste de modifier manuellement le code HTML de la boîte de dialogue, mais ne pense pas que la cause des probs. Certains autres css réglage de porte?

Le seul problème, c'est qu'il fait de la largeur hors-centre, mais j'ai trouvé ce billet de support pour fournir une solution de contournement de la passation de la dialog('open') déclaration dans un setTimeout pour résoudre le problème.

Voici le contenu de ma balise head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

J'ai téléchargé le js et css de Jquery UI à partir de http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip. et le corps:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>

Answer 2

Eu le même problème et grâce à vous mentionner que le vrai problème était lié à la CSS, j’ai trouvé le problème :

Ayant `` au lieu de `` dans votre règle CSS rend la boîte de dialogue et se comporter bizarrement.

Answer 3

Voici comment je l’ai fait :

Réceptif jQuery UI dialogue (et un correctif pour le bug maxWidth)

Fixation du maxWidth & largeur : bug de l’auto.

Answer 4

J’imagine que réglage float : left pour la boîte de dialogue va fonctionner. Sans doute la boîte de dialogue est positionné de manière absolue par le plugin, auquel cas sa position sera déterminée par la présente, mais l’effet secondaire du flotteur - contribuent seulement aussi larges qu’elles devraient l’être d’organiser le contenu des éléments - entreront encore en vigueur.

Cela devrait fonctionner si vous venez de mettre une règle comme

dans votre feuille de style, mais vous devrez peut-être définir à l’aide de jQuery

Answer 5

J’ai eu le même problème quand j’ai amélioré jquery UI à 1.8.1 sans mettre à niveau le thème correspondant. Seulement est nécessaire pour mettre à jour le thème trop et « auto » fonctionne à nouveau.