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

134

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.

womp
la source

Réponses:

250

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>
Fermin
la source
Fermin - merci pour votre exemple et votre message. Il s'avère que c'était vraiment un problème avec le CSS, bien que le problème exact ne soit toujours pas clair (ce n'était certainement pas évident de Firebug de toute façon). En déplaçant toutes mes divs de dialogue au niveau supérieur et en utilisant le CSS par défaut 1.8.1 (au lieu de notre version thématique), cela fonctionne très bien. Je réinstallerai progressivement notre version thématique lors de la sortie de la version 1.8.1 et trouverai la racine du problème. Merci!
womp
Pas de problème, content de pouvoir vous aider. J'y suis déjà allé auparavant, il s'agit de déplacer 1 instruction css à la fois .... profitez-en!
Fermin
2
IE7 semble être cassé cependant
Alex
2
Si vous utilisez AJAX pour charger le contenu, setTimeout () peut ne pas fournir une solution fiable (par exemple, si le serveur était lent et mettait plus de 100 ms à se charger). Une meilleure solution serait d'utiliser la fonction de rappel de la méthode .ajax () pour déclencher l'ouverture. De cette façon, il ne s'ouvrira pas tant que le chargement de la page ne sera pas terminé.
njbair
1
{'width':'auto'}ne fonctionne pas dans IE7 et ne sera pas corrigé car l' {'width':'auto'}option n'est pas prise en charge par jQuery-UI selon scott.gonzalez: "Les dialogues ne prennent pas en charge la largeur automatique. La documentation indique que l'option n'accepte qu'un nombre, qui sera utilisé pour une taille de pixel. Consultez le fil de discussion jquery-ui-dev pour savoir pourquoi nous ne prenons pas en charge la largeur automatique. "
Vladimir Kornea
11

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;}
Fortes
la source
2

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

où rhys
la source
2

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.

Jesús Alonso
la source
2

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,
    ...
Alex
la source
2

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>

Salman A
la source
1

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");
  }
});
tsi
la source
1

J'ai eu ce problème aussi.

Je l'ai fait fonctionner avec ceci:

.ui-dialog{
    display:inline-block;
}
Ken Q
la source
1

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

width: '65%',
taggartJ
la source
Sur la base de la question d'OP, cela ne fonctionnerait pas pour toutes ses boîtes de dialogue, et il aurait encore besoin de définir chaque boîte de dialogue individuellement.
roelofs
0

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.

Scott
la source
0

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.

Vladimir Kornea
la source
-1

modifier ce soufflet:

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

Carl 256
la source
3
Veuillez ajouter quelques explications à votre code - pourquoi devrait-on modifier votre réponse?
Nico Haase