web-dev-qa-db-fra.com

avec la boîte de dialogue jquery UI, existe-t-il quand même une hauteur maximale et utilise 'auto' si sa plus petite

Je souhaite qu'une boîte de dialogue ait un paramètre de hauteur maximale, mais si le contenu est plus petit, réduisez alors pour faire ce que height = 'auto' fait. Est-ce possible dans la boîte de dialogue de l'interface utilisateur de JQuery?

jqueryjquery-ui-dialog
23
leora

Vous pouvez y parvenir 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 test case sur jsFiddle .

36
mekwall

J'utilise ceci:

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

La réinitialisation de maxHeight dans "open" est utile lorsque la taille de la fenêtre a été modifiée.

15
clime

Vous pouvez le faire comme ça:

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


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
3
pivotal developer

Après la boîte de dialogue .open() et le remplissage avec .html():

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

Bug n ° 4820 dans la boîte de dialogue jQuery UI, vous pouvez être intéressé par les solutions de contournement.

1
Jonathon Hill

Je pense que vous pouvez travailler avec heightet maxHeight et ajuster la hauteur de la boîte de dialogue lorsque la hauteur de votre contenu div <boîte de dialogue maxheight Faites cela lorsque la boîte de dialogue est open. Comme ça:

<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);
       }
    }
});

essayez-le en changeant la style="height:3000pxvalue: http://jsbin.com/iwecuf/2/edit

1
anmarti

Vous pouvez envelopper le contenu de la boîte de dialogue dans une autre div à laquelle max-height est appliquée, comme ceci:

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

Laissez-moi jeter mes 2 cents dans.

Créez un style CSS comme si

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

Maintenant, indiquez simplement à la boîte de dialogue d'appliquer cette classe à la boîte de dialogue

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

Voici un exemple dans jsbin

Tant que votre contenu est inférieur à la hauteur maximale, il sera automatiquement redimensionné. Sinon, la hauteur maximale prendra effet et vous obtiendrez une barre de défilement à l'intérieur du dialogue. 

0
David