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

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