Hãy JQuery UI Dialog tự động phát triển HEIGHT để phù hợp với nội dung của nó (chiều rộng vẫn tĩnh)

Sau khi nhìn vào Make JQuery UI Dialog automatically grow or shrink to fit its contents, tôi đang sử dụng tùy chọn height: "auto" khi xây dựng một hộp thoại modal jQuery:Hãy JQuery UI Dialog tự động phát triển HEIGHT để phù hợp với nội dung của nó (chiều rộng vẫn tĩnh)

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

Tuy nhiên, chiều cao isn 't' đang phát triển "để phù hợp với tất cả nội dung. Tôi vẫn thấy một thanh cuộn dọc như trong hình ảnh này:

jQuery Modal Dialog Image

Có cách nào đúng trong các mã định nghĩa tôi liệt kê để đảm bảo rằng chiều cao phát triển đủ để cho một thanh cuộn dọc không hiển thị? Hoặc, tôi có cần thực hiện điều này trước khi mở hộp thoại không?

Chỉnh sửa 1
Không chắc chắn lý do nhưng Chrome đang hiển thị điều này nhưng IE 8 thì không. Tôi cần nó để làm việc cụ thể trong IE 8 vì vậy tôi tin rằng tôi chỉ sẽ đặt một lề dưới trên văn bản.

Nguồn

2012-05-02 Zack Macomber

Đây là mẫu 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);

Nguồn

2012-05-02 16:39:35 coder

hmmm - vì vậy những gì là đặc biệt về tôi? Tôi chỉ có một số văn bản định dạng thông thường trong div cho hộp thoại. –

Một số css khác có thể ảnh hưởng đến điều này. Bạn đã kiểm tra với điều đó chưa? – coder

Tôi đã lấy tất cả CSS khác ngoại trừ giao diện người dùng –

Đó là rất lạ ... Tôi không chắc chắn như thế nào hữu ích này sẽ được, nhưng tôi đã quản lý để có được những tính năng tự động cao để làm việc với mã sau:

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

Về cơ bản, bạn đang sử dụng cấu trúc tương tự mà bạn đã thiết lập.

Nguồn

2012-05-02 16:44:28

này tất cả những gì đã làm cho hộp thoại để phát triển tự động

$("#edit_dependent").dialog({ 

    autoOpen:false, 

    modal:true, 

    width:800, 

    position:["center",20], 

    minHeight:"auto" 

});

Nguồn

2014-04-18 17:35:54

Đây là 4 năm trễ nhưng tôi có cùng một vấn đề.

Wrote mã mà cố định nó

Đặt một lớp duy nhất trên hộp thoại của bạn:

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

Nguồn

2016-04-21 17:37:22 Enfantcool

Hãy JQuery UI Dialog tự động phát triển HEIGHT để phù hợp với nội dung của nó (chiều rộng vẫn tĩnh)

Trả lời

Các vấn đề liên quan