Redimensionner automatiquement la boîte de dialogue jQuery UI à la largeur du contenu chargé par ajax

Question

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

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

Je veux juste avoir la boîte de dialogue redimensionne à la largeur du contenu qui est chargé. En ce moment, la largeur reste à 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 boîtes de dialogue, et rien ne se passe lorsque je le spécifie.

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

Si vous spécifiez width: 'auto' pour les options de boîte de dialogue, 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 place une solution de contournement kludgy pour cela, mais je suis toujours à la recherche d'une meilleure solution.

Answer 1

Je viens d'écrire un petit exemple d'application utilisant JQuery 1.4.1 et UI 1.8rc1. Tout ce que je faisais était de préciser le constructeur comme:

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

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

Je ne fais pas d'appels AJAX, juste en changeant manuellement le HTML de la boîte de dialogue mais je ne pense pas que cela puisse causer des problèmes. Est-ce que d'autres réglages de CSS pourraient l'assommer?

Le seul problème est qu'il rend la largeur hors centre, mais je trouve ce support ticket où ils fournissent une solution de contournement de placer la déclaration dialog('open') dans un setTimeout pour résoudre le problème.

Voici le contenu de mon étiquette de tête:

<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é les js et css pour l'interface utilisateur de Jquery 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

Je suppose la mise en float: left pour la boîte de dialogue fonctionnera. Vraisemblablement, le dialogue est positionné de manière absolue par le plugin, auquel cas sa position sera déterminée par ceci, mais l'effet secondaire des éléments flottants ne sera aussi large que nécessaire pour contenir le contenu - sera toujours actif.

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

.myDialog {float:left} 

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

Answer 3

J'ai eu le même problème quand je mis à jour l'interface utilisateur jquery à 1,8 .1 sans mettre à jour le thème correspondant. Seulement est nécessaire pour mettre à jour le thème aussi et "auto" fonctionne à nouveau.

Answer 4

eu le même problème et merci à vous mentionner que le vrai problème était lié à CSS j'ai trouvé la question:

Ayant position:relative au lieu de position:absolute dans votre .ui-dialog règle CSS rend la boîte de dialogue et width:'auto' se comportent étrangement.

.ui-dialog { position: absolute;} 

Answer 5

Pour une raison quelconque, je continuais à avoir ce problème sur toute la largeur de la page avec IE7 donc je 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, 
    ... 

Answer 6

J'ai le même problème et avoir la position: absolute dans votre .ui-dialogue { } css n'était pas suffisant. J'ai remarqué cette position: le paramètre relatif étant défini sur le style direct de l'élément réel, la définition du fichier .ui-dialog css était écrasée. Position de réglage: absolue sur le div que j'allais faire un dialogue statiquement n'a pas fonctionné. En fin de compte, j'ai changé deux placés dans ma jQuery locale pour faire ce travail.

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

elem.style.position = "absolute"; 

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

En outre, depuis mon dialogue a été mis à draggable, je devais changer cette ligne aussi bien dans jQuery-uipour être:

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

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

Perh Aps en passant par le style que j'ai plus à fond réparer les choses, mais je pensais que je partagerais comment j'ai eu ce travail.

Answer 7

Voilà comment je l'ai fait:

Responsive jQuery UI Dialog (and a fix for maxWidth bug)

Fixation du maxWidth & largeur: bug automatique.

Answer 8

Vous pouvez éviter le problème de largeur de 100% en spécifiant une largeur maximale. L'option maxWidth ne semble pas fonctionner; Définissez donc la propriété CSS max-width sur le widget de boîte de dialogue à la place. Si vous souhaitez également limiter la hauteur maximale, utilisez l'option maxHeight. 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("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://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="http://i.stack.imgur.com/5leq2.jpg" width="450" height="300"> 
 
</div> 
 

 
<div id="content-2" style="display: none;"> 
 
    <img src="http://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>

Answer 9

J'ai eu un problème similaire.

Réglage width-"auto" a bien fonctionné pour moi, mais quand la boîte de dialogue contenait beaucoup de texte, il a rendu la pleine largeur enjambent de la page, en ignorant le réglage maxWidth.

Réglage maxWidth sur create fonctionne bien si:

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

Answer 10

Si vous avez besoin de 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.

Answer 11

j'ai eu ce problème aussi bien.

Je l'ai travailler avec ceci:

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

Answer 12

Tout ce que vous devez faire est juste d'ajouter:

width: '65%',