Làm cho hộp thoại JQuery UI tự động phát triển hoặc thu nhỏ để phù hợp với nội dung của nó

Tôi có một cửa sổ bật lên hộp thoại JQuery UI hiển thị một biểu mẫu. Bằng cách chọn một số tùy chọn trên biểu mẫu, các tùy chọn mới sẽ xuất hiện trong biểu mẫu khiến nó phát triển cao hơn. Điều này có thể dẫn đến một kịch bản trong đó trang chính có thanh cuộn và hộp thoại JQuery UI có thanh cuộn. Kịch bản hai thanh cuộn này gây khó chịu và khó hiểu cho người dùng.

Làm cách nào tôi có thể làm cho hộp thoại JQuery UI phát triển (và có thể thu nhỏ) để luôn vừa với nội dung của nó mà không hiển thị thanh cuộn? Tôi muốn chỉ có một thanh cuộn trên trang chính được hiển thị.

Cập nhật: Kể từ jQuery UI 1.8, giải pháp hoạt động (như đã đề cập trong nhận xét thứ hai) là sử dụng:

width: 'auto'

Sử dụng tùy chọn autoResize: true. Tôi sẽ minh họa:

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

Đây là một ví dụ hoạt động: http://jsbin.com/ubowa

Câu trả lời là đặt

autoResize:true 

thuộc tính khi tạo hộp thoại. Để làm việc này, bạn không thể đặt bất kỳ chiều cao nào cho hộp thoại. Vì vậy, nếu bạn đặt chiều cao cố định bằng pixel cho hộp thoại trong phương thức người tạo hoặc thông qua bất kỳ kiểu nào, thuộc tính autoResize sẽ không hoạt động.

Điều này hoạt động với jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});

Tôi đã sử dụng các tài sản sau đây hoạt động tốt cho tôi:

$('#selector').dialog({
     minHeight: 'auto'
});

Chiều cao được hỗ trợ để tự động.

Chiều rộng thì không!

Để thực hiện một số loại tự động lấy kích thước của div bạn đang hiển thị và sau đó đặt cửa sổ với.

Trong mã C # ..

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }

Nếu bạn cần nó để hoạt động trong IE7, bạn không thể sử dụng tùy chọn không có giấy tờ, lỗi và không được hỗ trợ {'width':'auto'} . Thay vào đó, hãy thêm những điều sau vào .dialog():

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

Việc .scrollWidthcó bao gồm phần đệm bên phải hay không tùy thuộc vào trình duyệt (Firefox khác với Chrome), vì vậy bạn có thể thêm số pixel "đủ tốt" chủ quan vào.scrollWidth hoặc thay thế bằng chức năng tính toán độ rộng của riêng bạn.

Bạn có thể muốn bao gồm width: 0trong số các .dialog()tùy chọn của mình , vì phương pháp này sẽ không bao giờ giảm chiều rộng, chỉ tăng nó.

Đã thử nghiệm để hoạt động trong IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 và Opera 22.

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

đã làm những gì tôi cần nó để làm thay đổi kích thước chiều rộng của hộp thoại.