jQuery UI 대화 상자가 자동으로 성장하거나 내용물에 맞게 수축시킵니다.

StackOverflow https://stackoverflow.com/questions/756325

문제

양식을 표시하는 jQuery UI 대화 상자 팝업이 있습니다. 양식에서 특정 옵션을 선택함으로써 새로운 옵션이 형식으로 표시되어 키가 커질 수 있습니다. 이로 인해 기본 페이지에 스크롤 바가 있고 jQuery UI 대화 상자에는 스크롤 바가있는 시나리오로 이어질 수 있습니다. 이 2 스크롤 바 시나리오는 사용자에게보기 흉하고 혼란 스럽습니다.

스크롤 바를 표시하지 않고 항상 jQuery UI 대화 상자를 성장시키고 수축 할 수 있습니까? 메인 페이지의 스크롤 바만 보이는 것을 선호합니다.

도움이 되었습니까?

해결책

업데이트: jQuery UI 1.8 기준으로 작업 솔루션 (두 번째 의견에 언급 된 바와 같이)은 다음과 같습니다.

width: 'auto'

Autoresize : True Option을 사용하십시오. 나는 설명 할 것이다 :

  <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

대화 상자를 만들 때 속성. 이 작업을 수행하려면 대화 상자에 대한 높이를 설정할 수 없습니다. 따라서 Creator Method 또는 모든 스타일을 통해 대화 상자에 대한 고정 높이를 픽셀로 설정하면 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 오른쪽 패딩은 브라우저에 따라 다르기 때문에 (Firefox는 Chrome과 다릅니다) 주관적인 "충분히 양호한"픽셀을 추가 할 수 있습니다. .scrollWidth, 또는 자신의 너비 계산 기능으로 교체하십시오.

포함하고 싶을 수도 있습니다 width: 0 당신 중 .dialog() 옵션은이 방법이 너비를 절대 줄이지 않으므로 증가하지 않기 때문에 옵션은 증가합니다.

IE7, IE8, IE9, IE10, IE11, FIREFOX 30, Chrome 35 및 Opera 22에서 작업하도록 테스트했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top