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

У меня много проблем с поиском конкретной информации и примеров по этому поводу. У меня есть несколько диалоговых окон JQuery UI в приложении, прикрепленных к div, которые загружаются вызовами .ajax(). Все они используют один и тот же установочный вызов:

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

Я просто хочу изменить размер диалогового окна на ширину загружаемого содержимого. Прямо сейчас, ширина просто остается на 300 пикселей (по умолчанию), и я получаю горизонтальную полосу прокрутки.

Насколько я могу судить, "autoResize" больше не является вариантом для диалогов, и ничего не происходит, когда я укажу его.

Я пытаюсь не писать отдельную функцию для каждого диалога, поэтому .dialog("option", "width", "500") на самом деле не вариант, так как каждый диалог будет иметь разную ширину.

Задание width: 'auto' для параметров диалога просто заставляет диалоги занимать 100% ширины окна браузера.

Каковы мои варианты? Я использую jQuery 1.4.1 с jQuery UI 1.8rc1. Похоже, это должно быть что-то очень простое.

EDIT: для этого я применил kludgy обходной путь, но я все еще ищу лучшее решение.

ОТВЕТЫ

Ответ 1

Я только что написал небольшое примерное приложение с использованием 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') в setTimeout, чтобы устранить проблему.

Вот содержимое тега head:

<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>

Я загрузил js и css для JQuery UI из 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>

Ответ 2

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

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

.ui-dialog { position: absolute;}

Ответ 4

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

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

.myDialog {float:left}

в вашей таблице стилей, хотя вам может потребоваться установить его с помощью jQuery

Ответ 5

У меня была такая же проблема, когда я обновил jquery UI до 1.8.1 без обновления соответствующей темы. Необходимо только обновить тему, а "авто" снова работает.

Ответ 6

По какой-то причине у меня была проблема с полной шириной страницы с 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,
    ...

Ответ 7

Вы можете избежать проблемы ширины 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>

Ответ 8

У меня была аналогичная проблема.

Настройка 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");
  }
});

Ответ 9

У меня тоже была эта проблема.

Я работал с этим:

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

Ответ 10

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

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

Я изменил следующую строку в jQuery:

elem.style.position = "absolute";

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

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

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

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

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

Ответ 11

Если вам нужно, чтобы он работал в 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.

Ответ 12

Все, что вам нужно сделать, это просто добавить:

width: '65%',

Ответ 13

отредактируйте это ниже:

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