Bądź jQuery UI Dialog automatycznie rosną wysokości, aby dopasować swoją zawartość (szerokość pozostaje statyczna)

Po zbadaniu Make JQuery UI Dialog automatically grow or shrink to fit its contents używam opcji height: "auto" przy budowie modalnego okna dialogowego jQuery:Bądź jQuery UI Dialog automatycznie rosną wysokości, aby dopasować swoją zawartość (szerokość pozostaje statyczna)

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

Jednak ISN wysokość "t" rośnie "w celu dopasowania do całej zawartości. Ja wciąż widząc pionowy pasek przewijania jak w tym obrazie:

jQuery Modal Dialog Image

Czy istnieje sposób w samym kodzie definicji wymieniłem w celu zapewnienia, że wysokość rośnie na tyle, że pionowy pasek przewijania nie pokazuje? Czy muszę to zrobić programowo przed otwarciem okna dialogowego?

Edycja 1
Nie wiem dlaczego, ale Chrome wyświetla grzywny, ale IE 8 nie jest. Potrzebuję go specjalnie do pracy w IE 8, więc wierzę, że zamierzam umieścić dolny margines na tekście.

Źródło

2012-05-02 Zack Macomber

Oto próbka 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);

Źródło

2012-05-02 16:39:35 coder

hmmm - tak Co jest specjalnego o mnie? Mam po prostu jakiś regularny niesformatowany tekst w div dla okna dialogowego. –

Może to wpłynąć na niektóre inne pliki CSS. Czy to sprawdziłeś? – coder

Usunąłem wszystkie inne pliki CSS, z wyjątkiem materiałów interfejsu użytkownika –

To jest bardzo dziwne ... Nie jestem pewien, jak to będzie pomocne, ale nie udało się dostać auto-wysokość do pracy z następujący kod:

<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>

Jest to zasadniczo użycie tej samej struktury, którą już ustaliłeś.

Źródło

2012-05-02 16:44:28

To wszystko, co zrobiłeś dla okna dialogowego rosnąć automatycznie

$("#edit_dependent").dialog({ 

    autoOpen:false, 

    modal:true, 

    width:800, 

    position:["center",20], 

    minHeight:"auto" 

});

Źródło

2014-04-18 17:35:54

Jest 4 lata późno, ale mam ten sam problem.

Napisano kod, który naprawił

Put unikalną klasę na oknie:

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

Źródło

2016-04-21 17:37:22 Enfantcool

Bądź jQuery UI Dialog automatycznie rosną wysokości, aby dopasować swoją zawartość (szerokość pozostaje statyczna)

Odpowiedz

Powiązane problemy