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

134

У меня много проблем с поиском конкретной информации и примеров по этому вопросу. У меня есть несколько диалоговых окон 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. Кажется, это должно быть чем-то действительно легким.

РЕДАКТИРОВАТЬ: я реализовал грязный обходной путь для этого, но я все еще ищу лучшее решение.

WOMP
источник

Ответы:

250

Я только что написал крошечный пример приложения с использованием 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 с 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, хотя до сих пор неясно, в чем именно заключалась проблема (в любом случае это не было очевидно из Firebug). Переместив все мои div диалогового окна на верхний уровень и используя CSS 1.8.1 по умолчанию (вместо нашей тематической версии), он прекрасно работает. Я постепенно перенесу нашу тематическую версию обратно, когда выйдет релиз 1.8.1, и найду корень проблемы. Спасибо!
womp
Нет проблем, рад, что смог помочь. Я был там раньше, это случай переноса одного заявления css за раз ... наслаждайтесь!
Фермин
2
IE7, кажется, сломан, хотя
Алекс
2
Если вы используете AJAX для загрузки контента, setTimeout () может не обеспечить надежного решения (например, если сервер работал медленно и занимал более 100 мс для загрузки). Лучшим решением было бы использовать функцию обратного вызова метода .ajax () для запуска открытия. Таким образом, он не откроется, пока не завершится загрузка страницы.
njbair
1
{'width':'auto'}не работает в IE7 и не будет исправлена, потому что {'width':'auto'}опция не поддерживается jQuery-UI в соответствии с scott.gonzalez: «Диалог не поддерживает автоматическую ширину. Документы утверждают, что опция принимает только число, которое будет использоваться Размер пикселя указан в нити jquery-ui-dev, где обсуждается, почему мы не поддерживаем автоматическую ширину. "
Владимир Корнея
11

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

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

.ui-dialog { position: absolute;}
Fortes
источник
2

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

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

.myDialog {float:left}

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

wheresrhys
источник
2

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

Хесус Алонсо
источник
2

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

Вы можете избежать 100% ширины, указав максимальную ширину. maxWidthВариант не кажется на работу; поэтому max-widthвместо этого установите свойство CSS в диалоговом виджете.

Если вы также хотите ограничить максимальную высоту, используйте 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>

Салман А
источник
1

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

Установка 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");
  }
});
цзи
источник
1

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

Я получил это работает с этим:

.ui-dialog{
    display:inline-block;
}
Кен Q
источник
1

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

width: '65%',
taggartJ
источник
Исходя из вопроса OP, это не сработало бы для всех его диалоговых окон, и ему все равно нужно было бы настроить каждое диалоговое окно индивидуально.
roelofs
0

У меня та же проблема и положение: абсолютного в вашем .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

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

Скотт
источник
0

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

Владимир Корнеа
источник
-1

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

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

Карл 256
источник
3
Пожалуйста, добавьте некоторые пояснения к вашему коду - зачем редактировать ваш ответ?
Нико