jQuery UI 대화 상자 자동 크기 조정 AJAX가로드 한 컨텐츠 폭

https://stackoverflow.com/questions/2231446

19-09-2019
|

문제

나는 이것에 대한 특정 정보와 예를 찾는 데 많은 어려움을 겪고 있습니다. 내 응용 프로그램에 .ajax () 호출이로드 된 DIV에 첨부 된 여러 jQuery UI 대화 상자가 있습니다. 모두 동일한 설정 호출을 사용합니다.

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

대화 상자가로드되는 컨텐츠의 너비로 크기를 조정하고 싶습니다. 지금은 너비가 300px (기본값)에 남아 있으며 수평 스크롤 바를 얻습니다.

내가 알 수있는 한, "Autoresize"는 더 이상 대화 상자의 옵션이 아니며, 지정할 때 아무 일도 일어나지 않습니다.

각 대화 상자에 대해 별도의 기능을 쓰지 않으려 고 노력하고 있습니다. .dialog("option", "width", "500") 각 대화 상자의 너비가 다르기 때문에 실제로 옵션이 아닙니다.

지정 width: 'auto' 대화 상자 옵션의 경우 대화 상자가 브라우저 창의 너비의 100%를 차지하게 만듭니다.

내 옵션은 무엇입니까? jQuery UI 1.8RC1과 함께 jQuery 1.4.1을 사용하고 있습니다. 이것은 정말 쉬운 일이되어야합니다.

편집 : 나는 이것을 위해 Kludgy 해결 방법을 구현했지만 여전히 더 나은 솔루션을 찾고 있습니다.

해결책

방금 jQuery 1.4.1 및 UI 1.8RC1을 사용하여 작은 샘플 앱을 작성했습니다. 내가 한 것은 생성자를 다음과 같이 지정하는 것입니다.

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

나는 이것이 브라우저 창의 100% 너비를 차지한다고 말했지만 여기서는 FF3.6, Chrome 및 IE8에서 테스트 된 여기서 달콤하게 작동합니다.

나는 ajax 호출을하지 않고 대화 상자의 HTML을 수동으로 변경하지만 그 문제가 발생하지 않을 것이라고 생각하지 않습니다. 다른 CSS 설정이 이것을 노크 할 수 있습니까?

이것의 유일한 문제는 너비를 중심에서 벗어나게한다는 것입니다. 지원 티켓 그들이 배치의 해결 방법을 제공하는 곳 dialog('open') 문제를 해결하기 위해 설정 타임 아웃에서 문장.

내 헤드 태그의 내용은 다음과 같습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

jQuery UI의 JS와 CSS를 다운로드했습니다. http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip. 그리고 몸 :

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>

다른 팁

같은 문제가 있었고 실제 문제가 CSS와 관련이 있다고 언급 한 덕분입니다.

was position:relative 대신에 position:absolute 당신의 .ui-dialog CSS 규칙은 대화 상자를 만듭니다 width:'auto' 이상하게 행동하십시오.

.ui-dialog { position: absolute;}

내가 한 방법은 다음과 같습니다.

응답 jQuery UI 대화 상자 (및 MaxWidth 버그 수정)

MaxWidth 및 너비 수정 : 자동 버그.

플로트를 설정하는 상상 : 대화 상자를 위해 왼쪽이 작동한다고 생각합니다. 아마도 대화 상자는 플러그인에 의해 절대적으로 배치되며,이 경우 그 위치는 이것에 의해 결정될 것이지만, 플로트의 부작용은 컨텐츠를 유지하는 데 필요한만큼 넓은 요소를 만듭니다.

방금 규칙을두면 작동해야합니다.

.myDialog {float:left}

스타일 시트에서는 jQuery를 사용하여 설정해야 할 수도 있습니다.

해당 테마를 업그레이드하지 않고 jQuery UI를 1.8.1로 업그레이드했을 때도 같은 문제가있었습니다. 테마를 업그레이드하는 데만 필요하며 "자동"이 다시 작동합니다.

어떤 이유로 IE7 에이 전체 페이지 너비 문제를 계속 사용 하여이 해킹을 만들었습니다.

var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html('My message').dialog({
    width: w,
    maxWidth: 600,
    ...

최대 너비를 지정하여 100% 너비 문제를 피할 수 있습니다. 그만큼 maxWidth 옵션은 작동하지 않는 것 같습니다. CSS를 설정하십시오 max-width 대신 대화 상자 위젯의 속성.

최대 높이를 제한하려는 경우 사용하십시오. maxHeight 옵션. 필요한 경우 스크롤 바를 올바르게 표시합니다.

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>

나는 비슷한 문제가 있었다.

환경 width 에게 "auto" 나에게 잘 작동했지만 대화 상자에 많은 텍스트가 포함되어있을 때 페이지의 전체 너비에 걸쳐 maxWidth 환경.

환경 maxWidth ~에 create 그래도 잘 작동합니다 :

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});

나도이 문제가 있었다.

나는 이것으로 그것을 작동시켰다 :

.ui-dialog{
    display:inline-block;
}

나는 같은 문제가 있고 위치가 있습니다 : 당신의 .ui-dialog {} css는 충분하지 않았습니다. 나는 그 위치를 알아 차렸다. 위치 설정 : DIV의 절대적으로 통계적으로 대화를 나눌 것입니다.

결국 나는이 작업을하기 위해 지역 jQuery에 두 개를 바꾸었다.

jQuery의 다음 줄을 변경했습니다.

elem.style.position = "absolute";

~에 https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#l62

또한 대화가 Draggable로 설정되었으므로 jQuery-UI 에서이 줄을 변경해야했습니다.

this.element[0].style.position = 'absolute';

~에 https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#l48

아마도 스타일을 살펴보면 더 철저하게 문제가 해결 될 것이지만,이 일을 어떻게했는지 공유 할 것이라고 생각했습니다.

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에서 작업하도록 테스트했습니다.

당신이해야 할 일은 다음과 같이 추가하는 것입니다.

width: '65%',

이 벨로우어 편집 :

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow