Зробіть діалогове вікно інтерфейсу JQuery автоматично зростати або зменшуватися, щоб відповідати його вмісту

У мене з'являється діалогове вікно діалогу інтерфейсу JQuery, яке відображає форму. Вибравши певні параметри форми, у формі з’являться нові параметри, які змушують її зростати. Це може призвести до сценарію, коли на головній сторінці є смуга прокрутки, а у діалоговому вікні інтерфейсу JQuery є смуга прокрутки. Цей сценарій з двома прокрутками непривабливий і заплутаний для користувача.

Як я можу змусити діалогове вікно інтерфейсу JQuery зростати (і, можливо, скорочуватися), щоб завжди відповідати його вмісту, не показуючи смугу прокрутки? Я вважаю за краще, щоб на головній сторінці було видно лише смугу прокрутки.

Оновлення: Станом на 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'});

Я використав наступне властивість, яке добре працює для мене:

$('#selector').dialog({
     minHeight: 'auto'
});

Висота підтримується автоматично.

Ширина ні!

Щоб зробити якесь автоматичне отримання розміру діва, який ви показуєте, а потім встановіть вікно.

У коді 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));

зробив те, що мені потрібно для зміни розміру ширини діалогового вікна.