양식을 표시하는 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'});높이는 자동으로 지원됩니다.
폭은 아닙니다!
어떤 종류의 자동을 수행하려면 표시중인 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));대화 상자의 너비를 조정하기 위해 필요한 작업을 수행했습니다.