[jquery] JQuery UI Dialog를 내용에 맞게 자동으로 늘리거나 줄입니다.

Program / 글쓴이

양식을 표시하는 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);
    }

답변

IE7에서 작동해야하는 경우 문서화되지 않은 버그가 있으며 지원되지 않는 {'width':'auto'} 옵션을 사용할 수 없습니다 . 대신에 다음을 추가하십시오 .dialog().

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

.scrollWidth오른쪽 패딩 포함 여부 는 브라우저에 따라 달라 지므로 (Firefox는 Chrome과 다름) 주관적인 “충분한”픽셀 수를 추가 .scrollWidth하거나 자체 너비 계산 기능으로 대체 할 수 있습니다.

당신은 포함 할 수 있습니다 width: 0당신의 사이에서 .dialog()이 방법은 폭을 감소하지 않습니다 때문에, 만 증가 옵션.

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

답변

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

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

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