Jadikan Dialog JQuery UI otomatis tumbuh atau menyusut agar sesuai dengan isinya

131

Saya memiliki popup dialog JQuery UI yang menampilkan formulir. Dengan memilih opsi tertentu pada formulir, opsi baru akan muncul di formulir yang menyebabkannya bertambah tinggi. Ini dapat mengarah pada skenario di mana halaman utama memiliki scrollbar dan dialog JQuery UI memiliki scrollbar. Skenario dua-bilah gulir ini tidak sedap dipandang dan membingungkan bagi pengguna.

Bagaimana saya bisa membuat dialog JQuery UI tumbuh (dan mungkin menyusut) agar selalu sesuai isinya tanpa menampilkan bilah gulir? Saya lebih suka bahwa hanya scrollbar pada halaman utama yang terlihat.

jquery jquery-ui jquery-ui-dialog MikeN
sumber
1
Saya menyarankan untuk mengirim contoh kode, sulit untuk merekomendasikan solusi tanpa melihat struktur dialog.
Diego

Jawaban:

139

Pembaruan: Pada jQuery UI 1.8, solusi yang berfungsi (sebagaimana disebutkan dalam komentar kedua) adalah menggunakan:

width: 'auto'

Gunakan opsi autoResize: true. Saya akan menggambarkan:

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

Berikut ini contoh yang berfungsi: http://jsbin.com/ubowa

cgp
sumber
Hmm .. harus memperpanjang FrameDialog saya ... itu pada dasarnya adalah metode yang membuat konten iframed untuk digunakan dengan dialog .. itu tidak sempurna, tetapi bekerja dengan baik untuk proyek yang saya butuhkan.
Tracker1
20
Ini tidak berhasil untuk saya. Sebagai gantinya, saya mengatur opsi "lebar" ke "otomatis".
Sam
Memberi +1 pada komentar - itu berhasil untuk saya, dan contohnya juga berfungsi, jadi saya harus membayangkan ini tidak berubah, tapi hei, jika semuanya gagal, cobalah.
cgp
Ini tidak bekerja untuk lebar, itu hanya berfungsi untuk ketinggian saya pikir.
Walt W
18
Jawaban ini tidak lagi berlaku untuk versi 1.8.4 sebagai gantinya gunakan ketinggian auto forum.jquery.com/topic/dialog-auto-width
Jeff
48

Jawabannya adalah mengatur 

autoResize:true

properti saat membuat dialog. Agar ini berfungsi, Anda tidak dapat mengatur ketinggian untuk dialog. Jadi, jika Anda menetapkan tinggi tetap dalam piksel untuk dialog dalam metode pembuatnya atau melalui gaya apa pun, properti autoResize tidak akan berfungsi.

MikeN
sumber
9
Fantastis :) tetapi mengapa jQuery tidak menuliskannya di dokumentasi mereka?!. Pokoknya terima kasih.
Wahid Bitar
hati-hati, tidak bekerja dengan pemosisian oleh plugin pemicu (pada, saya, mati dll)
Jeffz
26

Ini berfungsi dengan jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});
IlludiumPu36
sumber
Bekerja untuk saya juga (v1.11.1).
Jay Cummins
11

Saya menggunakan properti berikut yang berfungsi dengan baik untuk saya:

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

Tinggi didukung ke otomatis.

Lebar tidak!

Untuk melakukan semacam otomatis, dapatkan ukuran div yang Anda perlihatkan lalu atur jendelanya.

Dalam kode 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
sumber
2

Jika Anda membutuhkannya untuk bekerja di IE7, Anda tidak dapat menggunakan opsi tidak berdokumen, buggy, dan tidak didukung {'width':'auto'} . Alih-alih, tambahkan yang berikut ke Anda .dialog():

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

Apakah .scrollWidthmenyertakan bantalan sisi kanan tergantung pada browser (Firefox berbeda dari Chrome), sehingga Anda dapat menambahkan jumlah piksel "cukup" subyektif untuk .scrollWidth, atau menggantinya dengan fungsi perhitungan lebar Anda sendiri.

Anda mungkin ingin memasukkan di width: 0antara .dialog()opsi Anda , karena metode ini tidak akan pernah mengurangi lebar, hanya menambahnya.

Diuji bekerja di IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, dan Opera 22.

Vladimir Kornea
sumber
1 
var w = $('#dialogText').text().length;

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

melakukan apa yang saya butuhkan untuk mengubah ukuran lebar dialog.

pengguna596393
sumber