web-dev-qa-db-fra.com

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 spécifiques et des exemples à ce sujet. Plusieurs applications de dialogue jQuery UI sont attachées aux div chargées avec des appels .ajax () dans mon application. Ils utilisent tous le même appel d'installation:

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

Je veux juste que la boîte de dialogue soit redimensionnée à la largeur du contenu chargé. Pour le moment, la largeur reste à 300 px (valeur par défaut) et je reçois une barre de défilement horizontale.

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, 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 la boîte de dialogue, les boîtes de dialogue occuperont tout 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 du problème pour kludgy, mais je cherche toujours une meilleure solution.

javascriptjqueryajaxjquery-uijquery-ui-dialog
133
womp

Je viens d'écrire un exemple d'application utilisant JQuery 1.4.1 et l'interface utilisateur 1.8rc1. Je n'ai fait que spécifier le constructeur en tant que:

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 cela fonctionne bien ici, testé dans FF3.6, Chrome et IE8.

Je ne fais pas d'appels AJAX, je ne fais que modifier manuellement le code HTML de la boîte de dialogue, mais je ne pense pas que cela causera de problèmes. Est-ce qu'une autre configuration CSS pourrait l'assommer?

Le seul problème avec ceci est que cela rend la largeur décentrée, mais j'ai trouvé ceci ticket d'assistance où ils fournissent une solution de contournement consistant à placer l'instruction dialog('open') 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é les fichiers js et 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>
249
Fermin

Avait le même problème et merci à vous de dire que le vrai problème était lié au CSS, j'ai trouvé le problème:

Si vous avez position:relative au lieu de position:absolute dans votre règle _.ui-dialog_ CSS, la boîte de dialogue et _width:'auto'_ se comportent étrangement.

_.ui-dialog { position: absolute;}
_
11
Fortes

Voici comment je l'ai fait:

Boîte de dialogue Responsive jQuery UI (et un correctif pour le bug maxWidth)

Correction du bug maxWidth & width: auto.

3
Jason

Pour une raison quelconque, je continuais à avoir ce problème de largeur de page complète 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,
    ...
2
Alex

Vous pouvez éviter le problème de la largeur à 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 dialogue.

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("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>
2
Salman A

J'imagine mettre float: laissé pour que le dialogue fonctionne. Vraisemblablement, le dialogue est positionné de manière absolue par le plug-in, auquel cas sa position sera déterminée par celui-ci, mais l'effet secondaire de float - créer des éléments aussi larges que nécessaire pour contenir du contenu - aura toujours un effet.

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

.myDialog {float:left}

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

2
wheresrhys

J'ai eu le même problème lorsque j'ai mis à niveau jquery UI en 1.8.1 sans mettre à jour le thème correspondant. Il ne faut que mettre à jour le thème et "auto" fonctionne à nouveau.

2
Jesús Alonso

J'avais un problème similaire.

Régler width sur "auto" fonctionnait bien pour moi, mais lorsque la boîte de dialogue contenait beaucoup de texte, elle couvrait toute la largeur de la page, en ignorant le paramètre maxWidth.

Régler 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");
  }
});
1
tsi

J'ai eu ce problème aussi.

Je l'ai eu avec ça:

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

Tout ce que vous avez à faire est d’ajouter:

width: '65%',
0
Taggart Jensen

J'ai le même problème et avoir la position: absolue dans votre .ui-dialogue {} css n'était pas suffisant. J'ai remarqué cette position: le paramètre relatif était défini sur le style direct de l'élément réel, de sorte que la définition CSS de .ui-dialog était en train d'être écrasée. Position de réglage: absolu sur le div J'allais faire un dialogue statique aussi n'a pas fonctionné.

En fin de compte, j’ai changé deux places placées 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, je devais modifier cette ligne également 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 que passer au travers de mon style de manière plus approfondie réglerait le problème, mais je pensais que je partagerais comment j'ai réussi à faire fonctionner cela.

0
Scott

Si vous en avez besoin pour fonctionner dans IE7, vous ne pouvez pas utiliser l'option non documentée, erronée ou non prise en charge{'width':'auto'}. Au lieu de cela, ajoutez ce qui suit à votre .dialog():

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

Si .scrollWidth inclut le remplissage à droite, cela dépend du navigateur (Firefox diffère de Chrome). Vous pouvez donc ajouter un nombre de pixels "suffisant" à .scrollWidth, ou le remplacer par le vôtre. fonction de calcul de largeur.

Vous voudrez peut-être inclure width: 0 parmi vos options .dialog(), car cette méthode ne diminuera jamais la largeur, mais l'augmentera seulement.

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

0
Vladimir Kornea