JQuery UI 대화 상자의 내용에 맞게 자동으로 확장 또는 축소

JQuery UI 대화 상자의 내용에 맞게 자동으로 확장 또는 축소

양식을 표시하는 JQuery UI 대화 상자 팝업이 있습니다.양식에서 특정 옵션을 선택하면 새 옵션이 양식에 나타나 키가 커집니다.이로 인해 메인 페이지에 스크롤 막대가 있고 JQuery UI 대화 상자에 스크롤 막대가 있는 시나리오가 발생할 수 있습니다.이 두 개의 스크롤 막대 시나리오는 보기 흉하고 사용자에게 혼란을 줍니다.

스크롤 막대를 표시하지 않고 JQuery UI 대화 상자를 늘리거나 축소할 수 있는 방법은 무엇입니까?메인 페이지의 스크롤 바만 표시했으면 합니다.

업데이트: jQuery UI 1.8에서 작업 솔루션(두 번째 설명에서 언급한 바와 같이)은 다음을 사용합니다.

width: 'auto'

---

autoResize:true 옵션을 사용합니다.설명하겠습니다.

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

다음은 http://jsbin.com/ubowa 의 작동 예입니다.

정답은 다음을 설정하는 것입니다.

autoResize:true 

속성을 입력합니다.이 작업을 수행하려면 대화 상자의 높이를 설정할 수 없습니다.따라서 작성자 메서드 또는 스타일을 통해 대화 상자의 픽셀 단위로 고정 높이를 설정하면 autoResize 속성이 작동하지 않습니다.

이것은 jQuery UI v1.10.3과 함께 작동합니다.

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

저는 다음 속성을 사용했는데, 이 속성은 저에게 적합합니다.

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

높이는 자동으로 지원됩니다.

너비가 아닙니다!

일종의 자동 작업을 수행하려면 표시 중인 div의 크기를 가져온 다음 창을 설정합니다.

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

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

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

대화 상자의 너비를 조정하기 위해 필요한 작업을 수행했습니다.

IE7에서 작동하기 위해 필요한 경우 문서화되지 않은 버그가 있거나 지원되지 않는 것을 사용할 수 없습니다. {'width':'auto'}선택.대신 다음을 추가합니다..dialog():

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

여부.scrollWidth오른쪽 패딩은 브라우저에 따라 다릅니다(파이어폭스는 크롬과 다릅니다). 따라서 에 주관적인 "충분히 좋은" 픽셀 수를 추가할 수 있습니다..scrollWidth또는 자체 너비 계산 함수로 대체합니다.

다음을 포함할 수 있습니다.width: 0너희들 중에.dialog()옵션: 이 방법은 너비를 절대로 줄이지 않으므로 너비만 늘립니다.

IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 및 Opera 22에서 작동하도록 테스트되었습니다.

언급URL : https://stackoverflow.com/questions/756325/make-jquery-ui-dialog-automatically-grow-or-shrink-to-fit-its-contents