Fare JQuery UI Dialog crescere automaticamente l'altezza per adattarsi il suo contenuto (larghezza rimane statico)

aver guardato in Make JQuery UI Dialog automatically grow or shrink to fit its contents, sto usando l'opzione height: "auto" quando si costruisce una finestra di dialogo modale di dialogo jQuery:Fare JQuery UI Dialog crescere automaticamente l'altezza per adattarsi il suo contenuto (larghezza rimane statico)

$("#dialog-message").dialog({ 
    autoOpen: false, 
    width: "400", 
    height: "auto", 
    show: "slide", 
    modal: true, 
    buttons: { 
     Ok: function() { 
      $(this).dialog("close"); 
     } 
    } 
});

Tuttavia, l'altezza ISN "crescere" per adattarsi a tutti i contenuti. Sono ancora vedere una barra di scorrimento verticale come in questa immagine:

jQuery Modal Dialog Image

C'è un modo giusto nel codice di definizione ho elencato al fine di garantire che l'altezza cresce a sufficienza in modo che una barra di scorrimento verticale non mostra? O devo fare questo programmaticamente prima di aprire la finestra di dialogo?

Modifica 1
Non so perché, ma Chrome si sta visualizzando questa benissimo ma IE 8 non è. Ho bisogno che funzioni in modo specifico su IE 8, quindi credo che metterò un margine inferiore sul testo.

fonte

2012-05-02 Zack Macomber

Ecco il campione demo

$("#dialog-message").dialog({ 
     modal: true, 
     height: "auto", 
       buttons: { 
        Ok: function() { 
         $(this).dialog("close"); 
        } 
       } 

      }); 
      setTimeout(function() { 
      $('#inside').append("Hello!<br>"); 
      setTimeout(arguments.callee, 1000); 
    },1000);

fonte

2012-05-02 16:39:35 coder

hmmm - quindi cosa c'è di speciale in me? Ho solo un normale testo non formattato nel div per la finestra di dialogo. –

Alcuni altri css potrebbero avere effetto con questo.Hai controllato con quello? – coder

Ho eliminato tutti gli altri CSS eccetto i contenuti dell'interfaccia utente –

Questo è molto strano ... io non sono sicuro di come utile questa sarà, ma sono riuscito a ottenere l'auto-altezza per lavorare con il codice seguente:

<html> 
<head> 
<link href="jqueryUI/css/ui-lightness/jquery-ui-1.8.19.custom.css" 
    rel="stylesheet" type="text/css"> 
<script src="jquery-1.7.1.js"></script> 
<script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#dialog").dialog({ 
    autoOpen: false, 
    width: "400", 
    height: "auto", 
    show: "slide", 
    modal: true, 
    buttons: { 
     Ok: function() { 
      $(this).dialog("close"); 
     } 
    } 
    }); 
    $("#dialog").dialog('open'); 
}); 
</script> 

</head> 
<body> 
<div id="dialog"> 
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /> 
</div> 
</body> 
</html>

In pratica utilizza la stessa struttura che hai già stabilito.

fonte

2012-05-02 16:44:28

questo tutto quello che hanno fatto per la finestra di dialogo di crescere automaticamente

$("#edit_dependent").dialog({ 

    autoOpen:false, 

    modal:true, 

    width:800, 

    position:["center",20], 

    minHeight:"auto" 

});

fonte

2014-04-18 17:35:54

Questo è di 4 anni di ritardo, ma ho lo stesso problema.

scritto il codice che ha risolto

Mettere una classe unica sul dialogo:

dialogClass:"someClassName" 

$(".someClassName").resize(function() { 
    var totalHeight = 0; 
    var children = $(".someClassName").children(); //get all divs inside the dialog 
    for (var i = 0; i < children.length; i++) { 
     if ($(children[i]).innerWidth() > 15) { 
      var childrenHeight = children[i].scrollHeight; 
      totalHeight += childrenHeight;//make sure your dialog will be the correct height 
     } 
    } 
    $("#idOfContentWithWrongHeight").innerHeight($("#idOfContentWithWrongHeight")[0].scrollHeight);//put the content at the height it should appear 
    $(".someClassName").height(totalHeight);//update the height of the dialog 
});

fonte

2016-04-21 17:37:22 Enfantcool

Fare JQuery UI Dialog crescere automaticamente l'altezza per adattarsi il suo contenuto (larghezza rimane statico)

risposta

Problemi correlati