Intereting Posts

Socket.io – Implémentation d'une carte d'association utilisateur-socket pour messagerie privée Comment remplacer toutes les périodes d'une chaîne qui ne sont pas dans une balise html? Est-il possible de recevoir un message SNS d'Amazon sur un script JS? Comment puis-je itérer de manière récursive sur un objet qui a des hiérarchies inconnues avec Angular JS? Comment puis-je détecter un événement button rightmouse sur mousedown? Comment puis-je activer une fonctionnalité + popup lorsque vous cliquez en dehors d'une carte dans Openlayers? Masquer le référent sur le clic Knockout: Changer la classe css en fonction de la valeur observable Comment puis-je jouer / mettre en pause plus d'une vidéo par mouseover Comment ajouter une notification sur l'onglet de l'application de Firefox? Modifiez le curseur de la souris sur la souris vers le style ancre-like Convertit les chars ISO / Windows en UTF-8 en Javascript Fichier de téléchargement HtmlUnit Changer les couleurs de la table avec javascript Nil n'est pas défini en vérifiant si l'utilisateur est connecté

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

J'ai beaucoup de problèmes pour trouver des informations spécifiques et des exemples à ce sujet. J'ai un certain nombre de boîtes de dialogue jQuery UI dans ma demande jointe aux divs qui sont chargées avec les appels .ajax (). Ils utilisent tous le même appel de configuration:

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

Je souhaite simplement que le dialogue redimensionne à la largeur du contenu chargé. À l'heure actuelle, la largeur reste à 300px (la valeur par défaut) et j'obtiens une barre de défilement horizontale.

Pour autant que je puisse le dire, «autoResize» n'est plus une option pour les dialogues, et rien ne se produit lorsque je le spécifie.

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

Spécification de la width: 'auto' pour les options de dialogue permet simplement aux dialogues d'atteindre 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 soit quelque chose qui soit vraiment simple.

EDIT: J'ai implémenté une solution de contournement kludgy pour cela, mais je recherche toujours une meilleure solution.

Je viens d'écrire un petit exemple d'application utilisant JQuery 1.4.1 et UI 1.8rc1. Tout ce que j'ai fait était 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 permet de prendre une largeur de 100% de la fenêtre du navigateur, mais ça fonctionne doux ici, testé dans FF3.6, Chrome et IE8.

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

Le seul problème avec cela est que cela réduit la largeur hors centre, mais j'ai trouvé ce ticket de support où ils fournissent une solution de contournement de la déclaration de dialog('open') dans un setTimeout pour résoudre le problème.

Voici le contenu de mon tag 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é js and css pour 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>

A eu le même problème et grâce à vous en mentionnant que le problème réel était lié à CSS, j'ai trouvé le problème:

position:relative .ui-dialog position:relative plutôt que position:absolute dans la règle CSS de .ui-dialog , la boîte de dialogue et la width:'auto' se comportent étrangement.

 .ui-dialog { position: absolute;}

Voici comment je l'ai fait:

Dialogue d'interface utilisateur jQuery réactive (et une correction pour bug maxWidth)

Fixation de maxWidth et largeur: bug automatique.

J'imagine le réglage flottant: la gauche pour la boîte de dialogue va fonctionner. On peut supposer que la boîte de dialogue est absolument positionnée par le plugin, auquel cas sa position sera déterminée par ceci, mais l'effet secondaire des éléments flottants aussi large qu'ils doivent être pour contenir le contenu – continuera à prendre effet.

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

 .myDialog {float:left}

Dans votre feuille de style, bien que vous deviez peut-être le configurer en utilisant jQuery

J'ai eu le même problème lorsque j'ai mis à niveau jquery UI vers 1.8.1 sans actualiser le thème correspondant. Il suffit de mettre à niveau le thème et "auto" fonctionne à nouveau.

Pour une raison quelconque, j'ai continué à avoir ce problème de largeur de page complète avec IE7, donc 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 100% de largeur en spécifiant une largeur maximale. L'option maxWidth ne semble pas fonctionner; Ainsi, définissez la propriété CSS max-width dans le widget de dialogue à la place.

Dans le cas où 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>

J'avais un problème similaire.

La width réglage à "auto" fonctionnait bien pour moi, mais lorsque la boîte de dialogue contenait beaucoup de texte, elle maxWidth toute la largeur de la page, ignorant le paramètre maxWidth .

Le réglage maxWidth sur create fonctionne bien cependant:

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

J'ai aussi eu ce problème.

Je l'ai travaillé avec ceci:

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

J'ai le même problème et j'ai une position: absolue dans votre dialogue .ui {} css n'était pas suffisant. J'ai remarqué cette position: relative était en train de définir le style direct de l'élément réel, de sorte que la définition de .ui-dialog css était écrasée. Position de réglage: absolue sur le div, j'allais faire un dialogue de façon statique, ne fonctionnait pas non plus.

À la fin, j'ai changé deux fois 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 réglable, je devais changer cette ligne aussi dans jQuery-ui pour être:

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

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

Peut-être passer par le style que j'ai plus complètement réparerait les choses, mais j'ai pensé que je partagerais comment je fonctionnais.

Si vous en avez besoin pour fonctionner dans IE7, vous ne pouvez pas utiliser l'option sans contrat, buggy et non prise en charge {'width':'auto'} . Au lieu de cela, ajoutez le suivant à votre .dialog() :

 'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

Si .scrollWidth comprend le rembourrage du côté droit dépend du navigateur (Firefox diffère de Chrome), vous pouvez soit ajouter un nombre subjectif "assez bon" de pixels à .scrollWidth , soit le remplacer par votre propre fonction de calcul de largeur.

Vous voudrez peut-être inclure une width: 0 parmi vos options .dialog() , car cette méthode ne diminue jamais la largeur, ne l'augmentez que.

Testé pour fonctionner dans IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 et Opera 22.