Chiều cao hộp thoại Jquery và thanh cuộn dọc

Question

Tôi đang trả về dữ liệu qua ajax để điền vào hộp thoại jquery. Về cơ bản, ajax là một bảng html với một số lượng hàng biến đổi.

Tôi muốn hộp thoại mở rộng để hiển thị các hàng, tối đa một kích thước dọc nhất định (350px), tại thời điểm đó, nó sẽ hiển thị thanh cuộn dọc.

Vì vậy, điều này có vẻ hoạt động tốt - hộp thoại thay đổi kích thước chính xác tùy thuộc vào số hàng. Tuy nhiên, tôi không bao giờ có được thanh cuộn dọc - vì vậy nếu tôi có 20 hàng, thì tôi chỉ có thể xem 9. Cuối cùng

Làm cách nào để buộc thanh cuộn dọc nếu chiều cao đó lớn hơn 350px?

$.ajax({ 
    type: 'POST', 
    url: 'myurl', 
    data: postdata, 
    dataType: 'json', 
    success: function (result) { 
     if (result.success && result.data) { 
      var $dialog = $('<div></div>').html(result.data).dialog({ 
       autoOpen: false, 
       title: 'History', 
       modal: true, 
       height: Math.min((result.rows * 25) + 150, 350), 
       width: 800 
      }); 
      $dialog.dialog('open'); 

     } 
     event.preventDefault(); 
    } 
}); 

Answer 1

Bạn nên thêm thuộc tính css overflow:auto cho div nội dung.

$("<div></div>").css({height:"350px", overflow:"auto"}); 

Nếu bạn cần CHỈ dọc cuộn overflow-y:auto và overflow-x:hidden

Answer 2

sử dụng css max-height: 350px; và tràn: tự động; .. nên được phạt

Answer 3

Tôi không muốn đưa ra một chiều cao cố định px vì vậy tôi đã tìm thấy một giải pháp cho mô hình các quy tắc css sau đây.

.modal { 
    display: inline-block !important; 
    max-height: 90%; 
    overflow: auto;/* Or scroll, depending on your needs*/} 

Tôi hy vọng nó phù hợp với bạn.