Automatyczne powiększanie lub zmniejszanie okna dialogowego interfejsu użytkownika JQuery w celu dopasowania do jego zawartości

132

Mam okno dialogowe interfejsu użytkownika JQuery, które wyświetla formularz. Wybierając określone opcje w formularzu, pojawią się nowe opcje w formularzu, powodując jego wzrost. Może to prowadzić do scenariusza, w którym strona główna ma pasek przewijania, a okno dialogowe interfejsu użytkownika JQuery ma pasek przewijania. Ten scenariusz z dwoma paskami przewijania jest brzydki i mylący dla użytkownika.

Jak mogę sprawić, by okno dialogowe interfejsu użytkownika JQuery rosło (i prawdopodobnie zmniejszało się), aby zawsze pasowało do jego zawartości bez wyświetlania paska przewijania? Wolałbym, aby widoczny był tylko pasek przewijania na stronie głównej.

jquery jquery-ui jquery-ui-dialog MikeN
źródło
1
Proponuję zamieścić próbkę kodu, trudno jest polecić rozwiązanie bez obejrzenia struktury okna dialogowego.
Diego

Odpowiedzi:

139

Aktualizacja: Począwszy od jQuery UI 1.8, działającym rozwiązaniem (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 działający przykład: http://jsbin.com/ubowa

cgp
źródło
Hmm ... będzie musiał rozszerzyć mój FrameDialog ... jest to zasadniczo metoda, która tworzy zawartość iframe do użytku z oknem dialogowym ... nie jest idealna, ale działa dobrze w projekcie, do którego jej potrzebowałem.
Tracker 1
20
To nie zadziałało dla mnie. Zamiast tego ustawiłem opcję „szerokość” na „auto”.
Sam,
+1 do komentarza - u mnie zadziałało i przykład też działa, więc wyobrażam sobie, że to się nie zmieniło, ale hej, jeśli wszystko inne zawiedzie, daj mu szansę.
cgp
To nie działa jednak dla szerokości, myślę, że działa tylko dla wysokości.
Walt W
18
Ta odpowiedź nie jest już ważna dla wersji 1.8.4, zamiast tego użyj wysokości auto forum.jquery.com/topic/dialog-auto-width
Jeff
48

Odpowiedzią jest ustawienie 

autoResize:true

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

MikeN
źródło
9
Fantastycznie :) ale dlaczego jQuery nie umieściło tego w swojej dokumentacji?!. W każdym razie dziękuję.
Wahid Bitar
ostrożnie, nie działa z pozycjonowaniem przez wtyczkę wyzwalacza (at, my, off itp.)
Jeffz
26

Działa to z interfejsem użytkownika jQuery v1.10.3

$("selector").dialog({height:'auto', width:'auto'});
IlludiumPu36
źródło
U mnie też zadziałało (wersja 1.11.1).
Jay Cummins
12

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

$('#selector').dialog({
     minHeight: 'auto'
});
emolah
źródło
Praca w jquery ui 1.12
Nguyên Ngô Duy
2

Wysokość jest obsługiwana automatycznie.

Szerokość nie jest!

Aby wykonać jakieś auto, pobierz rozmiar wyświetlanego elementu div, a następnie ustaw okno za pomocą.

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);
    }
Demz
źródło
2

Jeśli chcesz, aby działał w IE7, nie możesz użyć opcji nieudokumentowanej, błędnej i nieobsługiwanej {'width':'auto'} . Zamiast tego dodaj do swojego .dialog():

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

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

Możesz chcieć uwzględnić je width: 0wśród swoich .dialog()opcji, ponieważ ta metoda nigdy nie zmniejszy szerokości, a jedynie ją zwiększy.

Przetestowano do pracy w IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 i Opera 22.

Vladimir Kornea
źródło
1 
var w = $('#dialogText').text().length;

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

zrobiłem to, czego potrzebowałem, aby zmienić szerokość okna dialogowego.

user596393
źródło