Aby okno jQuery UI automatycznie rosło lub zmniejszało się, aby pasowało do jego zawartości

Mam okno jQuery UI, które wyświetla formularz. Wybierając pewne opcje w formularzu nowe opcje pojawią się w formularzu powodując, że Urosnąć. Może to prowadzić do sytuacji, w której Strona główna ma pasek przewijania, a okno jQuery UI ma pasek przewijania. Ten scenariusz z dwoma paskami przewijania jest nieestetyczny i mylący dla użytkownika.

Jak sprawić, by okno dialogowe jQuery UI rosło (i ewentualnie zmniejszało się), aby zawsze pasowało do jego zawartości bez wyświetlania paska przewijania? Wolałbym, żeby tak było. widoczny jest tylko pasek przewijania na stronie głównej.

Author: DavidRR, 2009-04-16
Source

7 answers

Update: od wersji jQuery UI 1.8, rozwiązaniem roboczym (jak wspomniano w drugim komentarzu) jest użycie: 

width: 'auto'

Użyj opcji autoResize: true. Zilustruję: 

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

Oto przykład pracy: http://jsbin.com/ubowa

 134
Author: cgp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-13 14:29:06

Odpowiedzią jest ustawienie 

autoResize:true

Właściwość podczas tworzenia okna dialogowego. Aby to zadziałało, nie można ustawić żadnej wysokości dla okna dialogowego. Więc jeśli ustawisz stałą wysokość w pikselach dla okna dialogowego w jego metodzie kreatora lub za pomocą dowolnego stylu, właściwość autoResize nie będzie działać.

 43
Author: MikeN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-16 14:42:40

To działa z jQuery UI v1. 10. 3

$("selector").dialog({height:'auto', width:'auto'});
 22
Author: IlludiumPu36,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 03:25:15

Użyłem następującej właściwości, która działa dobrze dla mnie: 

$('#selector').dialog({
     minHeight: 'auto'
});
 11
Author: emolah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-06 09:13:08

Wysokość jest obsługiwana w trybie auto.

Szerokość nie jest!

Aby zrobić jakieś auto Pobierz rozmiar div, który wyświetlasz, a następnie Ustaw okno z.

W kodzie 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);
    }
 2
Author: The Demz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-07 13:57:03 
var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

Zrobiłem to, co było potrzebne do zmiany rozmiaru okna dialogowego.

 1
Author: user596393,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-30 18:27:22

Jeśli potrzebujesz go do pracy w IE7, nie możesz użyć nieudokumentowanych, buggy i nieobsługiwanych {'width':'auto'} opcja. Zamiast tego Dodaj do swojego .dialog(): 

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

To, czy .scrollWidth zawiera po prawej stronie, zależy od przeglądarki (Firefox różni się od Chrome), więc możesz albo dodać subiektywną "wystarczająco dobrą" liczbę pikseli do .scrollWidth, albo zastąpić ją własną funkcją obliczania szerokości.

Możesz chcieć włączyć width: 0 do swoich opcji .dialog(), ponieważ ta metoda nigdy nie zmniejszy szerokości, tylko ją zwiększy.

Testowane do pracy w IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 i Opera 22.
 1
Author: Vladimir Kornea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-25 23:38:20