Redimensionner automatiquement la boîte de dialogue de l'interface utilisateur jQuery à la largeur du contenu chargé par ajax

J'ai beaucoup de mal à trouver des informations et des exemples spécifiques à ce sujet. J'ai un certain nombre de boîtes de dialogue d'interface utilisateur jQuery dans mon application attachées à des div qui sont chargés d'appels .ajax (). Ils utilisent tous le même appel de configuration:

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

Je veux juste que la boîte de dialogue soit redimensionnée à la largeur du contenu qui est chargé. À l'heure actuelle, la largeur reste juste à 300px (la valeur par défaut) et j'obtiens une barre de défilement horizontale.

Pour autant que je sache, "autoResize" n'est plus une option pour les dialogues, et rien ne se passe lorsque je le spécifie.

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

La spécification width: 'auto'des options de dialogue fait simplement que les boîtes de dialogue occupent 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 cela devrait être quelque chose de vraiment facile.

EDIT: J'ai mis en œuvre une solution de contournement kludgy pour cela, mais je suis toujours à la recherche d'une meilleure solution.

Je viens d'écrire un petit exemple d'application en utilisant JQuery 1.4.1 et UI 1.8rc1. Tout ce que j'ai fait a été de spécifier le constructeur comme suit:

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

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

Je ne fais pas d'appels AJAX, je change simplement manuellement le HTML de la boîte de dialogue mais je ne pense pas que cela causera des problèmes. Un autre paramètre css pourrait-il éliminer cela?

Le seul problème avec ceci est que la largeur est décentrée, mais j'ai trouvé ce ticket de support où ils fournissent une solution de contournement consistant à placer l' dialog('open')instruction 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 le css pour l'interface utilisateur Jquery à 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>

J'ai eu le même problème et grâce à vous avoir mentionné que le vrai problème était lié au CSS, j'ai trouvé le problème:

Avoir position:relativeau lieu de position:absolutedans votre .ui-dialogrègle CSS rend le dialogue et width:'auto'se comporte étrangement.

.ui-dialog { position: absolute;}

Voici comment je l'ai fait:

Dialogue d'interface utilisateur jQuery réactif (et un correctif pour le bogue maxWidth)

Correction du bug maxWidth & width: auto.

J'imagine que le réglage float: left pour la boîte de dialogue fonctionnera. Vraisemblablement, la boîte de dialogue est positionnée de manière absolue par le plugin, auquel cas sa position sera déterminée par cela, mais l'effet secondaire de float - rendre les éléments aussi larges que nécessaire pour contenir du contenu - prendra toujours effet.

Cela devrait fonctionner si vous mettez simplement une règle comme

.myDialog {float:left}

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

J'ai eu le même problème lorsque j'ai mis à niveau l'interface utilisateur de jquery vers la version 1.8.1 sans mettre à niveau le thème correspondant. Seul est nécessaire pour mettre à jour le thème aussi et "auto" fonctionne à nouveau.

Pour une raison quelconque, j'ai continué à avoir ce problème de largeur de page avec IE7, alors j'ai fait ce hack:

var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html('My message').dialog({
    width: w,
    maxWidth: 600,
    ...

Vous pouvez éviter le problème de largeur de 100% en spécifiant une largeur maximale. L' maxWidthoption ne semble pas fonctionner; alors définissez la max-widthpropriété CSS sur le widget de dialogue à la place.

Si vous souhaitez également contraindre la hauteur maximale, utilisez l' maxHeightoption. Il affichera correctement une barre de défilement si nécessaire.

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>

J'avais un problème similaire.

Réglage widthde "auto"bien fonctionné pour moi , mais quand la boîte de dialogue contenait beaucoup de texte , il fait enjamber la largeur de la page, en ignorant le maxWidthréglage.

Réglage maxWidthsur createfonctionne bien si:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});

J'ai eu ce problème aussi.

Je l'ai fait fonctionner avec ceci:

.ui-dialog{
    display:inline-block;
}

Tout ce que vous avez à faire est simplement d'ajouter:

width: '65%',

J'ai le même problème et avoir la position: absolue dans votre .ui-dialog {} css ne suffisait pas. J'ai remarqué que la position: relative était définie sur le style direct de l'élément réel, donc la définition css .ui-dialog était en train d'être écrasée. Position de réglage: absolue sur le div J'allais faire un dialogue statiquement ne fonctionnait pas non plus.

En fin de compte, j'ai changé deux placés dans mon jQuery local pour que cela fonctionne.

J'ai changé la ligne suivante dans jQuery pour être:

elem.style.position = "absolute";

à https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

De plus, comme ma boîte de dialogue était configurée pour être déplaçable, j'ai dû modifier cette ligne également dans jQuery-ui pour qu'elle soit:

this.element[0].style.position = 'absolute';

à https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

Peut-être que passer en revue le style que j'ai plus en profondeur réglerait les choses, mais j'ai pensé partager comment j'ai fait fonctionner cela.

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 ou .scrollWidthnon du 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.

modifier ce soufflet:

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',