Автоматическое изменение размера диалогового окна пользовательского интерфейса jQuery до ширины содержимого, загруженного ajax

была та же проблема, и благодаря тому, что вы упомянули, что реальная проблема была связана с CSS, я нашел проблему:

С position:relative вместо position:absolute в своем .ui-dialog CSS правило делает диалог и width:'auto' ведут себя странно.

.ui-dialog { position: absolute;}

вот как я это сделал:

реагировать на jQuery диалоговое окно пользовательского интерфейса ( и исправление ошибок значение maxwidth )

исправление maxWidth & width: автоматическая ошибка.

Я предполагаю, что настройка float: left для диалога будет работать. Предположительно диалог абсолютно позиционируется плагином, и в этом случае его положение будет определяться этим, но побочный эффект элементов float-making только настолько широк, насколько они должны быть для хранения контента - все равно вступит в силу.

Это должно работать, если вы просто поставить правило типа

.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 to "auto" работал нормально для меня, но когда диалог содержал много текста он сделал его охватить всю ширину страницы, игнорируя maxWidth настройка.

задание maxWidth on 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;
}

у меня такая же проблема и с позицией: абсолютная в вашем .пользовательский интерфейс-диалоговое{} в CSS не достаточно. Я заметил, что позиция: relative устанавливалась на прямой стиль фактического элемента, поэтому .пользовательский интерфейс-диалоговое окно определение CSS был перезаписываются. Установка позиции: абсолютная на div я собирался сделать диалог статически также не работал.

в конце концов я изменил два помещенных в мой локальный jQuery, чтобы сделать эту работу.

Я изменил следующую строку в jQuery, чтобы быть:

elem.style.position = "absolute";

at https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

кроме того, поскольку мой диалог был установлен в draggable, мне пришлось изменить эту строку также в jQuery-ui:

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

at https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

возможно, пройдя через стиль, который у меня есть более тщательно, я бы все исправил, но подумал, что поделюсь, как я это получил рабочий.

Если вам нужно, чтобы он работал в IE7, вы не можете использовать без документов, багги и без поддержки. Вместо этого добавьте в свой .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%',