avec jquery UI dialog, est-il de toute façon pour avoir un max de hauteur et utiliser "auto" si son de petites

Je veux une boîte de dialogue pour avoir un max de hauteur, mais, si le contenu est plus petit, puis à se rétrécir vers le bas pour faire ce height = 'auto' n'. Est-ce possible dans JQuery UI dialog?

  • Avez-vous essayé CSS max-height paramètre de la classe de votre boîte de dialogue? Donc il taille lui-même en tant que de besoin, mais pas plus de hauteur maximale autorisée.
  • Quel est le contenu?, une div, une page...
InformationsquelleAutor leora | 2011-04-14
  1. 36

    Vous pouvez atteindre cet objectif en procédant comme suit:

    HTML

    <div id="dialog" title="Dialog Title">
    Dialog content
</div>

    JavaScript

    $('#dialog').dialog({
    resizable: false,
    minHeight: 0,
    create: function() {
        $(this).css("maxHeight", 400);        
    }
});

    Découvrez cas de test sur jsFiddle.

    • Est-il une raison ou les raisons pour lesquelles vous souhaitez spécifier la hauteur de l'événement de création plutôt après le fait, comme ici, stackoverflow.com/a/17218922/469643? Ou tout simplement la préférence? Merci Marcus
    • Les deux œuvres, mais je pense que l'aide de la create de rappel est plus propre et plus facile à lire. Donc, je suppose que c'est la préférence 🙂
    InformationsquelleAutor mekwall
  2. 15

    J'utilise ceci:

    $('#dialog').dialog({
    maxHeight: $(window).height(),
    open: function() {
        $(this).dialog('option', 'maxHeight', $(window).height());
   }
});

    Réinitialisation maxHeight en "open" est utile lorsque la fenêtre a changé de taille.

    • Fonctionne pour moi, mais avec une petite modification: j'ai ajouté " px " à la maxHeight option. $(this).la boîte de dialogue('option', 'maxHeight', $(window).height() + 'px');
    InformationsquelleAutor clime
  3. 3

    Vous pouvez le faire comme ceci:

     $('#testing').resizable("enable");
 $('#testing').dialog({ maxHeight: 400 });


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
    • vous pouvez combiner le redimensionnement avec maxHeight. Vous pouvez vous référer à ce site wiki.jqueryui.com/w/page/12137849/Dialog
    • mais je ne veux pas permettre à la personne de redimensionner la suite
    • Le maxHeight s'applique uniquement à la redimensionnable max hieght pas la première ouverture de hauteur max. api.jqueryui.com/dialog/#option-maxHeight "La hauteur maximale à laquelle la boîte de dialogue peut être redimensionnée, en pixels."
    InformationsquelleAutor pivotal developer
  4. 2

    Après dialogue .open(), et de remplir avec de l' .html():

    $("#div").css('max-height','500px');
    InformationsquelleAutor Roger
  5. 1

    Bug #4820 jQuery dans le Dialogue de l'INTERFACE utilisateur est applicable, et vous pouvez être intéressé par les solutions de contournement.

    InformationsquelleAutor Jonathon Hill
  6. 1

    Je pense que vous pourriez travailler ensemble avec heightet maxHeight et ajustement de la hauteur de la boîte de dialogue lors de votre div contenu de la hauteur < boîte de dialogue maxheight. Le faire lorsque le dialogue est open. Comme ceci:

    <div id="dialog">
  <div id="contents">
    <input type="text" style="height:3000px"
  </div>  
</div>


    $('#dialog').dialog({
      autoOpen: false,
      maxHeight:400,
      height:400,
      buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:function(){
       var s = $('#contents').height();
       var s2 = $(this).dialog( "option", "maxHeight" );
       if(s < s2){
         $(this).height(s);
       }
    }
});

    essayer de changer le style="height:3000pxvaleur:
    http://jsbin.com/iwecuf/2/edit

    InformationsquelleAutor anmarti
  7. 0

    Laissez-moi jeter mes 2 cents.

    Créer un Style CSS comme

    .d-maxheight {  max-height:200px; }

    Maintenant de dire simplement la boîte de dialogue pour appliquer cette classe à la boîte de dialogue

    $(document).ready(function(){
  $(d).dialog({
    dialogClass: 'd-maxheight',
    height:400
  });
});

    Voici un exemple en jsbin

    Aussi longtemps que vous le contenu est inférieure à la hauteur maximale, il sera automatiquement la taille. Si ce n'est la hauteur max prendra effet et vous obtiendrez une barre de défilement à l'intérieur de la boîte de dialogue.

    InformationsquelleAutor David
  8. 0

    Vous pouvez envelopper la boîte de dialogue contenu dans un autre div qui a max-hauteur appliquée, comme ceci:

    <div id="dialog">
  <div style="max-height: 400px;">
      POPUP CONTENTS GO HERE
  </div>
</div>
    InformationsquelleAutor blairzotron