Chosen: Terpilih mendapat "cut" ketika ditempatkan di area dengan "overflow:hidden".

Ini sama dengan edisi #59

Bukankah ini tidak dapat dihindari karena elemen wadah, baik, "meluap: tersembunyi" begitulah cara kerja CSS. Satu-satunya cara untuk mengatasi ini adalah dengan membuat drop-down di luar wadah dan kemudian menggunakan pemosisian absolut.

Ya, saya setuju dengan dfischer. Sepertinya bukan masalah Terpilih. Menurut definisi, properti overflow menentukan apa yang terjadi jika konten melampaui batas elemen. Jika Anda tidak ingin _overflow_ disembunyikan, maka ubah properti itu.

Meskipun benar, saya pikir ini adalah kasus penggunaan umum dengan kotak dialog. (Terutama dialog jquery)

Ini adalah kasus penggunaan yang umum, namun berdasarkan tiket ini, seperti yang saya sebutkan sebelumnya... seluruh struktur dan implementasi harus berubah jika Anda ingin mencapai ini.

Anda _diperlukan_ untuk merender di luar wadah agar ini terjadi dan kemudian menggunakan sihir jQuery/JS untuk mengetahui posisi relatif terhadap pemicu.

Kasing jQuery Dialog tidak bergantung pada elemen wadah sehingga hanya menggunakan pemosisian berdasarkan dimensi tengah dan lebar dialog.

Ini lebih merupakan masalah CSS, bukan masalah Terpilih. Jangan letakkan overflow: disembunyikan di wadah. Anda harus menggunakan teknik lain untuk membersihkan pelampung di bawahnya jika itu yang Anda lakukan.

Saya baru saja menulis beberapa kode yang menurut saya melakukan apa yang Anda cari:

$.fn.perpanjang({
dipilih: fungsi (data, opsi) {
if ($(this).parent().css("overflow") == "hidden") {
//dapatkan offset antara parent dan child untuk menghitung diff
//ketika kita push ke absolute
var y = $(ini).offset().top - $(ini).parent().offset().top,
x = $(this).offset().left - $(this).parent().offset().left,
$t1 = $("<div/>", {
css: {
"posisi": "relatif",
"tinggi": $(ini).parent().height,
"lebar": $(ini).parent().width
}
}),
$t2 = $("<div/>", {
css: {
"posisi": "mutlak",
"atas": y,
"kiri": x
}
});
$t1.insertBefore($(this).parent());
$(ini).parent().appendTo($t1);
$t2.appendTo($t1);
$(ini).appendTo($t2);
}
return $(this).each(function (input_field) {
if (!($(ini)).hasClass("chzn-selesai")) {
kembalikan baru Terpilih (ini, data, opsi);
}
});
}
});

(btw saya baru mengenal github hari ini jadi jika ada tempat lain di mana saya harus memposting kode, beri tahu saya)

Kode itu secara efektif melakukan hal berikut:

1. menghitung offset antara kotak pilih dan induknya.
2. buat div induk dengan dimensi yang sama dengan overflow Anda yang disembunyikan dan atur ke relatif.
3. buat induk untuk kotak pilih yang membuat elemen sebagai absolut menggunakan offset x dan y dari langkah 1.
4. masukkan induk baru sebelum induk terpilih, tambahkan div luapan di dalam induk baru, tambahkan induk pilih baru di dalam induk induk, tambahkan pilih ke induk anak baru.

Ide menarik Matthew, tapi saya pikir itu tidak akan berhasil dalam dialog jQuery-UI bukan?

Kemungkinan besar elemen dropdown (.chzn-drop) perlu ditarik keluar dari .chzn-container dan naik ke badan dokumen...

Cukup tambahkan gaya ke halaman dan jawaban Anda adalah ya:

.ui-dialog{ overflow:terlihat; }

Tidak berfungsi untuk saya, karena saya membuat halaman saya menggunakan div sebagai kolom (berlawanan dengan td dan tabel).
Saya menggunakan " overflow:hidden " untuk menghentikan konten pelarian dari merusak div tetangga.

Saya kira banyak dari Anda menggunakan struktur yang sama.

Itu tidak akan berhasil, karena dialog disetel ke overflow:auto sehingga bisa
memiliki scrollbar jika perlu.

Pada Jum, 29 Jul 2011 pukul 23:47, ethaniel
[email protected]
menulis:

Tidak berfungsi untuk saya, karena saya membuat halaman saya menggunakan div sebagai kolom (berlawanan dengan td dan tabel).
Saya menggunakan " overflow:hidden " untuk menghentikan konten pelarian dari merusak div tetangga.

Saya kira banyak dari Anda menggunakan struktur yang sama.

Balas email ini secara langsung atau lihat di GitHub:
https://github.com/harvethq/chosen/issues/86#issuecomment -1681303

Sebelum kita masuk lebih jauh ke dalam percakapan ini, apa yang telah saya lakukan adalah perbaikan teoretis. Itu tidak dapat diterapkan ke semua skenario karena yang diperlukan hanyalah satu elemen yang memiliki atribut tandingan untuk mengacaukannya. Solusi di atas dengan overflow yang terlihat hanya akan berfungsi dengan opsi dialog resizable:false. Mengapa Anda perlu memilih overflow di luar dialog?

Oke, berikut adalah beberapa tangkapan layar yang semoga memperjelas masalah ini.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

Tangkapan layar 1 & 2 menunjukkan bagaimana perilakunya, tidak ada cukup ruang untuk
dropdown "di dalam" dialog, sehingga menggulir dan disembunyikan sebagai
hasil. Ini sangat kikuk untuk digunakan dan jelek dan bukan bagaimana bawaannya
kontrol pilih berfungsi (mereka muncul di atas konten, tidak masalah
seberapa dalam di dalamnya atau apa gaya luapannya.)

Tangkapan layar 3 & 4 menunjukkan solusi saya saat ini, yaitu secara keseluruhan
tumpukan ruang di bawah dropdown. Ini juga jelek dan membuat bentuknya
lebih sulit untuk digunakan.

Jadi, untuk meringkas, poin sebenarnya adalah bahwa kontrol pemilihan asli tidak
terbatas pada wadah induknya dan jika memungkinkan, yang dipilih
kontrol pilih yang ditingkatkan seharusnya juga tidak, karena dirancang untuk menjadi
pengganti drop-in untuk kontrol asli.

Ini secara teoritis dapat dilakukan tetapi akan membutuhkan sistem konstruksi/pemosisian yang sama sekali berbeda oleh plugin yang dipilih. Perubahan ini akan ekstensif dan membutuhkan sekitar 30% penulisan ulang dari plugin saat ini. Saya menganggap ini sebagai permintaan fitur dan bukan bug. Semua browser memiliki render default untuk elemen tertentu. Dipilih mereplikasi menggunakan divs tetapi tidak diperlakukan seperti elemen pilih.

Seperti yang saya katakan, satu-satunya cara untuk melakukan ini adalah pemosisian absolut DI LUAR elemen yang dipicu. Tidak ada jalan lain. Benar di @medelbrock

Meskipun akan sangat menyenangkan untuk memilih berperilaku seperti widget browser, saya setuju ini harus dianggap sebagai fitur bukan bug. Bisakah saat ini kami menetapkan ketinggian maksimum?

@veloper : Saya div.chzn-drop masih ada dalam dialog, jadi akan terpotong terlepas dari apakah itu benar-benar diposisikan atau tidak.

Satu-satunya cara untuk menghentikannya adalah dengan menarik div.chzn-drop keluar dari dialog dan menjadikannya anak dari <body> , tetapi seperti yang ditunjukkan semua orang, itu adalah perubahan yang lebih besar daripada siapa pun bersedia untuk mendapatkan tangan mereka kotor mencoba.

Sayangnya menggunakan overflow:visible bukanlah pilihan, dialog harus dapat digulir jika perlu.

Saya pikir saya telah memecahkan masalah dengan mengatur posisi drop-down ke absolut dan setiap kali menampilkan pengaturan drop-down posisinya.
misalnya Mengubah (mengedit javascript)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

ke

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Saya sendiri mengalami masalah ini ketika mencoba membuat Terpilih berfungsi di dalam Dialog UI Wijmo/jQuery. Saya mungkin keluar dari liga saya di sini, tetapi bukankah ada perbaikan yang cukup sederhana untuk membuat bagian "dropdown" memiliki "display: none" saat disembunyikan, dan kemudian "display: block" saat ditampilkan? Anda masih akan dikenakan scroll bar saat dropdown terbuka, tapi itu mungkin lebih baik daripada memiliki scroll bar yang selalu ada.

Cara mengatasinya (diuji di Chrome 13, Firefox 7 dan IE 9):

Di terpilih.css:

.chzn-container .chzn-drop {
posisi: tetap;
}

dan di Chosen.prototype.results_show

var offset = this.container.offset();
this.dropdown.css({
"top": (offset.top+dd_top) + "px",
"kiri": offset.kiri + "px",
"tampilan": "blok"
});

http://img30.imageshack.us/img30/4094/chosen3.png

Itu saja, pemikiran bagus @levushka. Diselesaikan sekarang di cabang saya: https://github.com/tompaton/chosen/commit/fda07051161f3ffe6049362b6c9b66ffbe857d1

Oke, ini sedikit lebih rumit dari itu. Perbaikan di atas tidak berfungsi jika halaman digulir.

Saya telah memperbarui repo saya dengan perubahan yang memperbaikinya, dropdown diposisikan dengan benar sekarang, tetapi jika halaman digulir saat dropdown terlihat, itu tidak bergerak seperti yang diharapkan. Itu menjengkelkan, tapi bukan penghenti pertunjukan.

iOS 5 _might_ menyelesaikan ini, tetapi iOS saat ini tidak mendukung position: diperbaiki dengan cara yang sama seperti yang dilakukan browser desktop. Chosen bekerja dengan sangat baik di desktop, tetapi ini mungkin membatasi penggunaannya pada browser seluler yang dirancang dengan buruk...

Saya tidak hanya memilih Apple di sini, versi Android yang lebih lama juga tidak memiliki dukungan untuk posisi: tetap.

Pada jQuery 1.7 (belum dirilis, tetapi dalam kandidat rilis) mereka memiliki tes bawaan untuk dukungan Tetap Posisi CSS:
http://bugs.jquery.com/ticket/6809

Mungkin layak untuk mendeteksi jQuery 1.7 dan menggunakan hasilnya, atau menyalin kode mereka dan mendapatkan hasil terpisah jika tidak.

+1 untuk posisi di akhir elemen tubuh.

periksa widget jquery "pelengkapan otomatis". solusi yang cukup bagus untuk masalah itu:

http://jqueryui.com/demos/autocomplete/

plugin yang bagus.

Saya mengalami masalah ini sebagian besar di browser webkit. IE hanya berjalan mental dengan yang dipilih, jadi saya menonaktifkannya jika mis. Menggunakan jquery, saya memeriksa apakah browser adalah webkit, dan menyesuaikan luapan div yang berisi pilihan saya seperti:

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

di mana ini adalah div yang berisi pilihan.

+1 @levushka dan @tompaton Tidak sempurna, tapi cukup bagus. Hampir tidak :)

Solusi @levushka bagus, tetapi bersifat global ... jadi di window.top ketika Anda menggulir ke bawah dan mengklik untuk memilih, itu bergulir ke bawah di posisi yang salah. Jadi di sini adalah solusi untuk halaman normal dan jendela popup

di Chosen.prototype.results_show

mengganti:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

dengan:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS:

   .popup .chzn-container .chzn-drop { position:fixed; }

Jika Anda menggunakan jQuery UI atau yang lainnya, Anda dapat memiliki masalah dengan z-index, jadi atur z-index yang dipilih ke nilai yang lebih tinggi (jQuery UI apakah itu 1010+)

Sekarang sedang bekerja di FF dan untuk Chrome Anda perlu:

     .popup { overflow-x:visible; overflow-y:visible; }

elemen kekasih dapat memiliki overlow:hidden tanpa masalah.

Mengapa tidak merender dropdown di badan dan menggunakan fungsi posisi Jquery UI untuk memposisikan kotak? http://jqueryui.com/demos/position/. Ini adalah metode standar yang digunakan untuk banyak widget jquery ui.

$( ".czn-jatuhkan" ).position({
dari: $( "#wadah" ),
saya: "kiri atas",
di: "kiri bawah",
});

Maafkan saya karena menerobos masuk, saya memiliki masalah yang sama dengan menampilkan drop down yang dipilih dalam dialog jQueryUI.
Saya mencoba hal-hal biasa dengan overflow tetapi ini mengacaukan dialog saya yang lain.

Apa yang saya lakukan sebagai gantinya, adalah mengatur dialog saya ke ketinggian tetap dan mengatur drop down yang dipilih ke ketinggian tetap juga.
Akan lebih baik jika memiliki opsi untuk melakukan ini dari opsi yang dipilih alih-alih css.

.chzn-jatuhkan {
melimpah: otomatis;
tinggi maksimum: 75 piksel;
}

Mungkin ini membantu orang lain.

Maaf untuk pertanyaan yang cukup n00bish/RTFM, tetapi bagaimana saya bisa membuat dropdown di luar wadah (katakanlah, pada body )? Saat ini, satu-satunya hal yang terlintas dalam pikiran saya adalah fork plugin dan memasukkan potongan kode itu ke dalamnya. Harus ada cara yang lebih elegan untuk mencapai ini.

Apakah ada event yang dipilih ketika drop down buka/tutup. Jika demikian, saya bisa mengubah pengaturan overflow dari div orang tua menjadi terlihat dan kemudian kembali. Saya mencobanya dengan:

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

Dan, ya, itu berhasil. Tapi, kemudian ketika saya menambahkan:

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

Itu tidak lagi berhasil. Saya berasumsi karena saya memiliki beberapa kontrol yang dipilih pada formulir. Jika saya dapat menambahkan kode ini di dalam acara buka/tutup maka saya pikir itu akan membawa saya ke tempat yang saya inginkan.

Anda dapat mendengarkan liszt:showing_dropdown dan liszt:hiding_dropdown dikirim pada elemen pilih asli

Luar biasa ... jadi ini menyelesaikan masalah saya:

$(".chzn-select").on(" liszt:showing_dropdown ", function() {
$(ini).parents("div").css("overflow", "terlihat");
});
$(".chzn-select").on(" liszt:hiding_dropdown ", function() {
$(ini).parents("div").css("overflow", "");
});

Tentu saja, ini mungkin tidak berfungsi dengan semua tata letak.

Terima kasih... BOb

Saya telah membuat kode untuk membuat anak dropdown dari <body/> . Saya belum cukup mengujinya, tetapi berfungsi di sini dengan sempurna -> https://github.com/gil/chosen

Bisakah Anda melihat apakah itu menyelesaikan masalah Anda, @tompaton? Saya pikir saya hanya perlu mendeteksi pengguliran sekarang, untuk memperbaiki posisi secara manual.

Garpu memperbaiki masalah tampilan untuk saya, dan bekerja dengan baik di bagian bawah halaman di mana ia membatasi ketinggian yang ditampilkan untuk sesuatu yang masuk akal. Namun, garpu menghentikan fungsi multi-pilih agar tidak berfungsi.

@geoffweatherall Benarkah? Bagus! :D Tentang masalah dengan multi-seleksi, apa yang berhenti bekerja? Bisakah Anda mencoba file example.jquery.html dan memberi tahu saya jika tidak berfungsi? Bagi saya sepertinya tidak apa-apa.

Ya, contoh berfungsi dengan baik (FF 12).

Contoh pemilihan tunggal ada di halaman html yang cukup sederhana dengan "panel" yang menggunakan overflow tersembunyi. Namun, contoh multi pilih ada dalam "dialog" yang dibuat menggunakan colorbox (http://www.jacklmoore.com/colorbox) - jangan tanya kenapa, proyeknya seperti itu ketika saya tiba. Saya kira itu mungkin ada hubungannya dengan itu, saya akan memeriksanya.

Garpu memperbaiki masalah cut-off di sejumlah lokasi di aplikasi kami, termasuk multi-pilihan yang tidak bersarang di dalam kotak warna (http://www.jacklmoore.com/colorbox). Saya percaya masalah dengan colorbox bukan kesalahan yang dipilih. Garpu besar :-)

Sebenarnya saya menemukan masalah dengan garpu yang muncul di halaman contoh (example.jquery.html). Untuk kontrol pilihan-multi, jika Anda mengklik di kontrol untuk membuka daftar opsi, lalu menggunakan tombol panah atas dan panah bawah untuk menavigasi daftar, daftar opsi membuat langkah mengejutkan ke bagian atas halaman. Masalah ini tidak terjadi untuk pilihan tunggal. Diuji di FF12, Chrome 18 dan IE8.

@geoffweatherall Mungkin masalah dengan kotak warna adalah bahwa itu dirender melalui dropdown Terpilih. Coba sesuatu seperti ini untuk melihat apakah itu membantu:

.chzn-drop {
    z-index: 999999 !important;
}

Atau coba atur opacity colorbox ke 0.1 untuk memeriksa apakah Anda dapat melihat dropdown di bawah colorbox.

Masalah lainnya, dengan kunci, saya akan mencoba mencari solusi. Saya tidak menggunakan multi-seleksi dalam proyek yang saya kerjakan sekarang, jadi saya hampir tidak mengujinya. Lebih fokus pada opsi pilihan tunggal.

Ok, saya mencoba ini dan saya mendapatkan drop down terlihat, namun posisinya salah. Mereka turun sedikit di bawah kotak teks. Berikut adalah jing yang menunjukkan perilaku tersebut. http://screencast.com/t/c4PCIHC176RX

Hai Gil,

Saya sudah mencoba versi Anda dan berhasil! Terima kasih banyak!
Hanya ada satu hal kecil yang berhenti bekerja.. Ini adalah opsi disable_search_threshold. Bidang pencarian tidak akan hilang.

Apakah Anda punya ide?

Terima kasih!

Lupakan! Saya berhasil memperbaikinya sendiri, namun .. mungkin Anda harus mengubahnya dalam kode juga:

Mengubah:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

Ke

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

Apa status garpu ini? Apakah sudah digabung menjadi master? Atau masih dalam uji coba?

Satu masalah lain .. garpu tampaknya berfungsi untuk saya, tetapi di firefox saya melihat div dropdown di bagian bawah halaman. Tampaknya posisi kiri negatif tidak memindahkannya keluar dari area tampilan. Mungkin karena beberapa gaya lain yang saya... pikir. Ada ide? Mengapa tampilannya tidak disetel ke none?

Saya membuat permintaan tarik sejak lama untuk perbaikan asli saya tetapi itu
tidak pernah diterima (tidak tahu mengapa).

Ada banyak tweak tambahan yang disarankan di utas ini
sejak itu, saya belum bermain dengan salah satu dari mereka, dan belum memeriksa
untuk melihat apakah seseorang memiliki garpu yang menggabungkannya (jika tidak ada
satu, seseorang harus membuatnya, dan jika ada, itu bagus
menjawab pertanyaan Anda.)

Pada Kam, 7 Jun 2012 pukul 06.44, Bob Archer
[email protected]
menulis:

Satu masalah lain .. garpu tampaknya berfungsi untuk saya, tetapi di firefox saya melihat div dropdown di bagian bawah halaman. Tampaknya posisi kiri negatif tidak memindahkannya keluar dari area tampilan. Mungkin karena beberapa gaya lain yang saya... pikir. Ada ide? Mengapa tampilannya tidak disetel ke none?

---

Balas email ini secara langsung atau lihat di GitHub:
https://github.com/harvethq/chosen/issues/86#issuecomment -6162299

Saya mencoba semuanya, dan tidak ada yang berfungsi untuk saya, karena saya memiliki beberapa bidang yang disembunyikan dan formulir panjang yang digulir. Jadi, solusi saya adalah membuat dropdown statis dan tersembunyi pada awalnya, dan ditampilkan saat dibuka, yang meregangkan wadah induk. Ini berfungsi di semua formulir saya, bahkan jika itu di bagian paling bawah layar.

di Chosen.prototype.results_show:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

Di Chosen.prototype.results_hide:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

di terpilih.css:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

@gil , saya hanya ingin mengucapkan terima kasih atas garpu Anda, saya hampir menyerah menggunakan Terpilih untuk proyek saya karena bug ini.

Sejujurnya saya cukup terkejut bahwa orang-orang panen tidak melihat cacat yang melekat dalam mengikat popup mengambang ke wadah yang dibatasi. Bahkan terlepas dari aturan overflow, itu bukan ide yang baik untuk perpustakaan umum yang tidak tahu apa yang mungkin dilakukan orang di sekitar widget.

Hai teman-teman! Senang mengetahui garpu saya membantu beberapa orang dengan masalah ini ... :)

Saya tidak tahu apakah mereka berencana untuk mengubah kode atau bergabung dengan beberapa solusi yang diusulkan di sini. Kami tidak tahu apakah kami dapat berasumsi bahwa ini adalah solusi terbaik untuk semua kasus. Mari terus menguji dan mungkin mengirim permintaan tarik dengan semua perubahan.

@geoffweatherall Saya telah memperbaiki kode dengan sesuatu yang saya pikir akan membantu Anda dengan masalah keyboard. Tolong beritahu saya jika berhasil! ;)

@PilotBob Apakah Anda masih memiliki masalah dengan jing itu? Tentang masalah lain, saya telah menguji example.jquery.html di Firefox 12 dan tampaknya baik-baik saja. Mungkin Anda dapat mencoba mengganti semua left:-9000px yang dapat Anda temukan dengan display:none . Saya tidak tahu kodenya dengan cukup baik untuk memberi tahu Anda, tetapi karena saya mengatur display:block pada results_show() , itu mungkin membantu Anda.

@pruimmartin Terima kasih atas perbaikan Anda dan maaf karena terlalu lama membalas. Saya sudah menggabungkan perbaikan pada kode saya!

gil - tidak, sepertinya tidak terjadi lagi, dan saya tidak mengubah apa pun. Saya berharap mungkin ada kesalahan js di tempat lain yang menyebabkannya. Namun, saya memiliki masalah lain dengan yang dipilih dan saya telah mempertimbangkan untuk menggantinya dengan yang lain. Ini terutama karena kurangnya pembaruan yang dilakukan pada master.

@PilotBob Saya sedang mempertimbangkan proyek ini: https://github.com/ivaynberg/select2
Mereka memiliki masalah luapan yang sama, tetapi saya pikir mereka berencana untuk mengubah pada versi 3.

@gil - Solusi Anda berfungsi dengan baik, tetapi dengan lebar li.search-field tetap pada 25px . Dengan kata lain, ketika saya memuat halaman contoh Anda, menu ditambahkan dengan indah ke elemen body , tetapi teks placeholder dan pengetikan apa pun dibatasi hingga lebar 25px . Bahkan, sepertinya metode search_field_scale tidak ada sama sekali. Apakah saya melewatkan sesuatu di sini?

@rreusser Saya telah menghapus metode search_field_scale , karena hanya digunakan untuk banyak pilihan dan untuk menghitung posisi dengan benar. Itu tidak diperlukan lagi untuk garpu ini. Browser/versi/OS apa yang Anda uji? Bagi saya ukuran bidang pencarian benar di example.jquery.html .

@rreusser Hei, maaf. Sekarang saya melihat apa yang salah. Saya akan mencoba untuk memperbaikinya nanti hari ini.

Tidak masalah, @gil! Terima kasih atas balasan secepatnya! Saya perlu melakukan lebih banyak eksperimen, tetapi mungkin juga berguna untuk mengizinkan keterikatan pada elemen arbitrer—yang juga seharusnya cukup sepele, saya pikir. Saya memiliki kotak pilih di dalam div gulir, dan sementara solusi Anda mencegah kliping, menu tidak bergerak dengan div saat digulir. Saya pikir semua yang diperlukan adalah satu div tambahan di suatu tempat, tetapi ini akan memakan waktu.

@rreusser Saya telah mengembalikan komit itu dan memperbaiki masalah yang saya coba perbaiki secara berbeda. Bisakah Anda mencoba lagi dan memberi tahu saya apakah itu berhasil untuk Anda?

Dan tentang melampirkan ke elemen yang berbeda, saya berpikir untuk membuatnya dapat dikonfigurasi. Tetapi Anda dapat menyelesaikan masalah pengguliran Anda dengan sedikit konfigurasi. Ketika <select /> bukan turunan langsung dari div gulir Anda, coba ini:

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

Tetapi jika simpul induk <select /> Anda adalah <div /> , ini seharusnya tidak diperlukan.

@gil , Apakah garpu ini akan digabung menjadi master? Atau masih dalam uji coba? Saya juga memiliki masalah dengan kontrol keyboard di garpu, tombol panah bawah tidak mengaktifkan metode results_show atau results_toggle. Terima kasih :-)

@myfriendtodd Saya belum tahu, mungkin saya bisa mengirim Permintaan Tarik ketika semua orang menganggapnya stabil. Tapi saya masih berpikir itu perlu lebih banyak pengujian. Saya akan mencoba memperbaiki masalah keyboard akhir pekan ini. Terima kasih!

@myfriendtodd Hei, saya pikir saya sudah memperbaikinya. Bisakah Anda mengujinya di proyek Anda? ;)

terima kasih @gil akan memberi tahu Anda bagaimana hasilnya. Terima kasih atas seluruh bantuan Anda :-)

@gil Terima kasih banyak atas garpu Anda. Perbaikannya bekerja dengan baik untuk saya - luar biasa!

Namun, saya menggunakan Kickstrap untuk menata Terpilih agar sesuai dengan Twitter Bootstrap. Ini menghasilkan Terpilih dengan perbaikan ini menjadi sangat rusak - konten dropdown muncul di bagian bawah halaman, tidak bergaya - https://skitch.com/dyad/euys2/login . Sejauh yang saya tahu semua yang dilakukan Kickstrap adalah menulis ulang gaya Terpilih default.

File KURANG untuk perubahan yang dibuat pada gaya dapat ditemukan di https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less - apakah ada sesuatu yang jelas bahwa perbaikan perbaikan Anda menjelaskan mengapa ini mungkin terjadi?

Terima kasih banyak memang.

Hai teman-teman,

Saya sedang mengerjakan versi baru dengan pendekatan yang berbeda, alih-alih menambahkan dropdown ke badan. Versi ini jauh lebih bersih dan diharapkan akan mengurangi banyak bug, karena perubahannya tidak terlalu besar. Bisakah kalian mencobanya untuk melihat apakah itu berhasil? Ada di cabang baru:

https://github.com/gil/chosen/tree/new_version

@conatus Bisakah Anda mencoba dengan versi ini juga? Versi terakhir pada cabang "master" memiliki banyak perubahan pada file css, versi ini hanya mengubah 3 baris. Ubah ini di css Terpilih Kickstrap:

• Baris 4, ubah dari "posisi: relatif;" ke "posisi: statis;".
• Baris 13 berubah dari "position: absolute;" ke "posisi: tetap;".
• Pada baris 128, sisipkan baris baru "display: none;", di bawah "left: -9000px;"

Saya harap ini akan berhasil! ;)

Juga, versi baru ini sinkron dengan cabang master harvesthq!

Maaf saya tidak menindaklanjuti sebelumnya, tetapi kami masuk ke bagian proyek yang berbeda dan ini memudar dengan sangat cepat! Saya akan mengujinya dan memberi tahu Anda segera setelah saya mendapat kesempatan. Terima kasih banyak atas upaya Anda yang berkelanjutan!

@gil - Saya sedang menguji versi Anda dan meskipun berfungsi dengan baik, ada masalah kecil: ketika dipilih ditempatkan di dalam elemen posisi tetap, maka menggulir halaman akan menggantikan dropdown. Ini sebenarnya masalah dengan jQuery Autocomplete juga.

Saya hanya bisa memikirkan 2 kemungkinan solusi untuk ini:
1) Jika dipilih ditempatkan di dalam elemen posisi tetap, dropdown harus ditempatkan di dalam chzn-container dan diberikan posisi tetap juga. Posisi teratas harus dihitung dengan posisi tetap wadah
2) Hitung ulang posisi dropdown saat menggulir

Opsi ketiga adalah membuat dropdown tetap setiap kali pilih berada dalam wadah posisi tetap.

@ragulka @ChiperSoft Saya melihat masalahnya... Hanya untuk memastikan, apakah jsfiddle ini mereproduksi apa yang kalian katakan? http://jsfiddle.net/QY256/

Saya akan mencoba melakukan sesuatu tentang hal itu. Ada opsi baru bernama overflow_container yang akan menangani masalah pengguliran, seperti yang Anda lihat saat Anda menggulir div saja. Tapi masalahnya di sini adalah ketika Anda menggulir jendela, itu akan diposisikan dengan tidak benar.

Saya sedang berpikir untuk menutup Terpilih, ketika sesuatu bergulir, karena menangani gulir menyebabkan beberapa masalah kecil lainnya (seperti ketika <select /> hanya setengah terlihat).

@ragulka @ChiperSoft Juga, sebagai perbaikan sementara, dapatkah kalian mencoba mengubah baris 640, di dalam metode update_position , dari:

"top": (offset.top + dd_top) + "px",

ke:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil Ya dan tidak - jsfiddle yang Anda berikan memang menunjukkan masalah, tetapi bagi saya itu muncul ketika saya menggulir badan (elemen tetap saya tidak memiliki bilah gulir). Di jsfiddle Anda, masalahnya tampaknya muncul ketika saya menggulir konten elemen tetap, tetapi tidak saat menggulir badan.

@ragulka Saya tahu ini bukan solusi terbaik, tapi saya pikir saya sudah memperbaikinya di sini. Bisakah Anda mencobanya? Buat perubahan pada baris 640, seperti yang saya katakan, dan terapkan Terpilih seperti ini:

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

Ini harus menangani scroll pada div dan pada document , dan memperbaiki posisinya.

Tapi seperti yang saya katakan, saya pikir saya akan mengubah ini nanti untuk membuat Terpilih bersembunyi ketika pengguna menggulir sesuatu.

Ini mungkin bukan bug yang dipilih, tetapi saya beralih ke select2 sebagai pengganti pengganti yang dipilih dan masalah hilang tanpa perlu melakukan solusi apa pun.

Terima kasih banyak untuk itu.

Dalam waktu intervensi Kickstrap diperbarui - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Cabang baru Anda bekerja dengan sangat baik, namun perubahan yang Anda sarankan pada Kickstrap CSS tampaknya tidak berpengaruh. Yang terjadi adalah drop down itu sendiri tidak lagi muncul. Ada ide? Terima kasih banyak.

Terima kasih @gil!!! Cabang Anda (https://github.com/gil/chosen/tree/new_version) memperbaiki masalah saya dengan masalah khusus ini.

Terima kasih untuk semua sarannya. Saya membuat sedikit modifikasi pada saran di atas agar dropdown berfungsi dengan modals Bootstrap v2.1.1 dan Chosen v0.9.11. Perubahan kecil diperlukan agar .chzn-drop diposisikan dengan benar setelah dibuka kembali setelah halaman digulir.

Semoga ini bisa membantu orang lain.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

Javascript

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

Jadi saya bermain sedikit dengan Chosen 0.9.11 dan saya mengidentifikasi perubahan yang perlu saya lakukan pada Chosen...

Saya menggunakan Terpilih di dalam Dialog jQueryUI yang banyak dimodifikasi yang dapat diseret dan memiliki ketinggian maksimum dengan overflow: scroll.

Agar Terpilih berperilaku seperti yang saya inginkan, saya mengubah ".chzn-container .chzn-drop" menjadi " position:fixed " dan menambahkan " display:none ". Kemudian di "Chosen.prototype.results_hide" saya menambahkan " display:none " ke "this.dropdown.css"...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

Dan di "Chosen.prototype.results_show" saya mengganti konten "this.dropdown.css" dengan " display:block ".
Untuk mendapatkan posisi yang tepat dari .chzn-drop div saya telah menambahkan fungsi posisi jQueryUI.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Dalam "Chosen.prototype.search_field_scale" ubah...

return this.dropdown.css({
    "top": dd_top + "px"
});

... ke ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Sekarang saya hanya punya satu masalah yang tersisa:

Saya perlu mendengarkan acara seret Dialog UI jQuery untuk menutup drop Terpilih ketika seseorang mulai memindahkan dialog. Saya sudah mencapai ini tetapi kodenya cukup kotor :-)

Apakah ada kemungkinan perbaikan non-sepele dari cabang ini https://github.com/gil/chosen/commits/new_version di -porting ke GWTChosen?
GWTChosen luar biasa. Namun, dalam kondisi saat ini tidak dapat digunakan dengan LayoutPanels sama sekali.

Bagaimana dengan menambahkan fitur baru ke perpustakaan Terpilih di mana daftar akan ditampilkan di atas bidang teks hanya dengan menambahkan kelas yang berbeda atau baru? Dengan cara ini skrip tidak harus membuat daftar di luar pembungkus overflow:hidden div, dan mungkin akan menyelesaikan sebagian besar masalah yang dimiliki orang lain. PS: Saya tidak menganggap ini sebagai masalah karena overflow:hidden melakukan persis seperti yang seharusnya dilakukan. Lebih menyenangkan memiliki fitur. Terima kasih.

+1 Untuk saran Klikerko.

Sama seperti @sillysachin saya menggunakan GWTChosen dan saya memiliki masalah yang sama dengan LayoutPanels, overflow:hidden dan ChosenListBox :/

Adakah yang tahu perbaikan untuk ini? @sillysachin apakah Anda telah menemukan sesuatu sejak Anda memposting di sini?

Tks sebelumnya :)

Kami telah menambalnya secara ad-hoc dengan menarik div dropdown dari wadah induk. Sayangnya saya dibanjiri dengan rilis naksir dan akan membutuhkan waktu untuk membersihkan tambalan sebelum mengirimkannya di sini.

Komit ini di https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 memperbaikinya dengan cukup baik. Ini relatif mutakhir, tetapi saya melakukannya hanya untuk jQuery.

@robmcguinness Saya harus memodifikasinya agar berfungsi. Namun, itu menciptakan bug. di mana Anda tidak bisa Tutup dropdown.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

dan saya harus menambahkan lebar ke CSS, jika tidak maka lebar situs akan 100%.

.modal .chosen-container .chosen-drop {
posisi: tetap;
lebar: 300 piksel;
}

Saya dapat memperbaiki masalah dengan kode di atas. Kompatibel dengan versi 1. Namun, milik saya lebih merupakan rig agar bisa berfungsi. tapi sejauh ini berfungsi dengan baik. Masalah terakhir yang saya lihat adalah mengubah ukuran browser, mod saat ini tidak berfungsi.

Adakah yang tahu jika ada kemungkinan perbaikan untuk masalah ini yang akan segera digabungkan ke cabang master? Ini adalah pemecah kesepakatan bagi saya =/.

Kami beralih menggunakan Select2... ia juga memiliki lebih banyak fitur.

Pada Kam, 19 Des 2013 pukul 11:24, Daniel Hoffmann Bernardes <
[email protected]> menulis:

Adakah yang tahu apakah ada kemungkinan perbaikan untuk masalah ini
bergabung ke cabang master segera? Ini adalah pemecah kesepakatan bagi saya =/.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/harvethq/chosen/issues/86#issuecomment -30942420
.

Terima kasih PilotBob, dipilih tidak lagi dipertahankan? Jika demikian, Anda mungkin ingin memperbarui dokumentasi.

Ini bukan proyek saya. Saya "adalah" penggunanya. Karena beberapa masalah yang kami temukan
sebuah alternatif.

Pada Kam, 19 Des 2013 pukul 11:53, Daniel Hoffmann Bernardes <
[email protected]> menulis:

Terima kasih PilotBob, dipilih tidak lagi dipertahankan? Jika demikian, Anda mungkin ingin
untuk memperbarui dokumentasi.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/harvethq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann Terpilih masih aktif dipertahankan. Select2 awalnya merupakan fork dari Chosen, tetapi sejak itu sudah cukup jauh sehingga menjadi miliknya sendiri.

Dipilih sengaja dibuat sederhana -- itu dimaksudkan sebagai pengganti drop-in untuk select s, sehingga menghindari banyak fitur dan konfigurasi yang rumit. Select2 mengambil rute yang berlawanan, dan menambahkan banyak, banyak fitur dan konfigurasi -- terserah Anda filosofi mana yang lebih Anda hargai.

Adapun masalah _spesifik_ ini, sayangnya hanya itu: masalah, bukan perbaikan. Jika seseorang mengajukan permintaan tarik untuk memperbaikinya, itu akan dipertimbangkan untuk digabungkan. Namun, OSS bukanlah pekerjaan utama pengelola mana pun -- mereka mengerjakannya saat mereka dapat mengerjakan pekerjaan penuh waktu mereka. Jadi, seperti biasa, "tarik permintaan diterima" jika Anda ingin mencoba memperbaikinya sendiri!

kapan masalah ini akan diperbaiki? itu sangat tua tetapi penting untuk banyak proyek! tolong di atasi secepatnya!

Terima kasih!

ada banyak perbaikan di garpu yang dipilih jadi mengapa tidak menggunakan salah satu dari perbaikan itu?

@domnulnopcea Tidak pernah ada PR yang mengirimkan perbaikan untuk ini, hanya laporan duplikat. Jika Anda memiliki ide untuk memperbaikinya, silakan kirim PR. Nanti akan kami review. Saat ini, saya tidak mengetahui adanya garpu yang memperbaiki masalah khusus ini

Saya memiliki perbaikan untuk ini, ini bukan garpu bersih, terkubur di repositori lain dan hanya pada versi jQuery. (Tidak, saya tidak bangga dengan diri saya sendiri)

Ia bekerja dengan menambahkan elemen drop-down ke elemen body dan mengatur posisinya secara mutlak ketika halaman di-scroll atau diubah ukurannya. Ini juga berfungsi jika drop down harus di atas atau di bawah bidang dan seberapa tinggi seharusnya (sehingga tidak terpotong oleh halaman).

Jika ini adalah sesuatu yang Anda minati untuk digabungkan (dan memang tidak ada garpu lain), saya akan mencoba dan mencari waktu untuk membersihkannya dan membuat permintaan tarik.

https://Gist.github.com/msaspence/11032254

@stof bagaimana dengan https://github.com/tompaton/chosen?

komit: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea ini tidak pernah diajukan untuk dimasukkan ke dalam AFAIK Terpilih itu sendiri. Kita tidak bisa mencari garpu sama sekali untuk memeriksa semua pekerjaan yang dilakukan di atasnya. Kami sedang mengerjakan Terpilih di waktu luang kami, jadi kami tidak dapat mendedikasikan minggu untuk memeriksa ribuan komit di banyak repo untuk melihat apa yang mereka lakukan

@stof kami sangat menghargai pekerjaan Anda. Saya menggunakannya di proyek saya sendiri (www.ubirimi.com) Tapi sekarang setelah saya memberi Anda tautan ke komit, apakah Anda akan berbaik hati untuk melihat perubahan itu dan menerapkannya ke repositori resmi yang dipilih?

Terima kasih banyak

Mengingat bahwa itu tidak dapat diterapkan secara langsung (kode telah banyak berubah sejak 11 bulan), itu akan memerlukan beberapa waktu (dan juga memerlukan pengujian untuk memastikannya berfungsi dengan baik). Jadi saya tidak bisa melakukannya sekarang

@stof terima kasih telah berpikir untuk melakukannya! Saya menghargainya!

@domnulnopcea jika itu penting bagi Anda, mengapa Anda tidak membahas perubahan dan membuat sendiri permintaan tarik. Bagaimanapun, inilah keindahan open source

@msaspence saya akan tetapi saya bukan pengembang frontend! Saya tidak terlalu terbiasa dengan JS dan semua hal sisi klien itu

Kami pindah ke Select2 karena memungkinkan untuk pengambilan data AJAX. Kalian mungkin ingin melihatnya.

Saya pikir semua orang telah pindah ke Select2 pada tahap ini - apakah ada keuntungan menggunakan Terpilih?

Bagi saya, solusi PilotBob bekerja dengan sempurna!

Saya menambahkan ini pada kode saya:

$(dokumen).siap(fungsi() {
$(".chzn-select").on(" liszt:showing_dropdown ", function() {
$(ini).parents("div").css("overflow", "terlihat");
});
}

Terima kasih banyak!!!

Masalahnya adalah posisi daftar opsi adalah absolute , itu tidak memperluas wadah induk. Solusi yang saya ajukan adalah mengubahnya menjadi float: left | right karena dapat memperluas induknya, jika setelah saya menambahkan objek DOM dengan clear:both

Saya memecahkan ini (digunakan dengan dialog jquery-ui) dengan yang berikut di css saya:

#clone-budget-dialog {overflow: visible;}

@grduggan dapatkah Anda mengusulkan solusi di css perpustakaan?
Saya pikir solusi Anda valid. Buat permintaan push!
+1

Tidak pernah melakukan itu sebelumnya. Aku harus menyelidiki. Akan lebih baik untuk memiliki di css.

Saya melihat masalah serupa ketika kotak pilih dekat dengan akhir halaman. Kotak pilih asli menyelesaikan ini hanya dengan membuka alih-alih menjatuhkan. Mengapa tidak?

melimpah: terlihat; pada div container bekerja untuk saya! Terima kasih.

anda tidak selalu membutuhkan overflow:hidden saat Anda menggunakan float, Anda juga dapat menghapus float menggunakan ini di orang tua Anda (hapus overflow:hidden):

&:sebelum,
&:setelah {
isi: " "; // 1
tampilan: meja; // 2
}
&:setelah {
jelas: keduanya;
}

begitulah cara kerja kelas clearfix di bootstrap

Saya memodifikasi css (lihat di bawah). Tampaknya berhasil untuk skenario saya.

.chosen-container .chosen-drop {
posisi: relatif; /_Diubah dari absolute untuk menghindari cutoff overflow di container_/
atas: 100%;
kiri: -9999px;
indeks-z: 1010;
lebar: 100%;
perbatasan: 1px padat #aaa;
batas atas: 0;
latar belakang: #ff;
bayangan kotak: 0px 4px 5px rgba(0,0,0,0.15);
}

.chosen-container .chosen-result {
warna: #444;
posisi: relatif;
overflow-x: tersembunyi;
overflow-y: otomatis;
margin: 0 4px 4px 0;
bantalan: 0 0 0 4px;
tinggi maksimum: 200 piksel; /_Berubah dari 240px_/
-webkit-overflow-scrolling: sentuh;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

Membungkus pilih (dan Terpilih) dalam elemen fieldset juga dapat menghasilkan efek yang tidak diinginkan di browser webkit (yaitu pemotongan ketika induk memiliki overflow: hidden ).
Ini karena webkit menambahkan min-width: -webkit-min-content; ke fieldset secara default.

Ini memecahkan masalah bagi saya:

fieldset { min-width: 0; }

@chassq hmm solusi Anda tidak berfungsi untuk saya, .. lihat tangkapan layar ini:

Saya memiliki div di sekitar pilihan yang dipilih dengan

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

Terima kasih kepada semua yang sudah memberikan solusi dengan position: fixed

Ini adalah jsfiddle dengan solusinya (menimpa kelas CSS yang dipilih):
http://jsfiddle.net/jwbL8utx/1/ ;)

Saya masih memiliki 1 masalah, saat menggulir ke bawah (menggunakan max-height) yang dipilih memiliki offset, seperti yang Anda lihat di sini saat menggulir ke bawah dan membuka yang dipilih kedua:

http://jsfiddle.net/jwbL8utx/2/

Inilah cara saya menyelesaikannya:

http://jsfiddle.net/0w4a4dq5/1/

Perbaikan ini tidak mengharuskan Anda untuk mengubah elemen lain selain menu yang dipilih itu sendiri. Anda akan melihat Itu menyembunyikan menu lagi jika Anda 'menghapusnya', tetapi ini sesuai kebutuhan saya. Jika Anda ingin menyimpannya di atas sepanjang waktu, Anda dapat mengikat acara gulir ke wadah div Anda dan memicu acara ' terpilih: close.chosen '.

@typologist Terima kasih atas solusi luar biasa Anda.
Ada dua bug kecil di JS Anda yang ingin saya sebutkan:
Di baris 51, seharusnya

'top': y - $(document).scrollTop()

jika tidak, popup dapat dipindahkan dalam kondisi tertentu

Di baris 23, alih-alih menggunakan

$('.chosen-container')

untuk mengikat acara, saya pikir akan lebih baik menggunakan

$chosenSelect.next('.chosen-container')

untuk menghindari banyak ikatan jika fungsi dipanggil lebih dari sekali dengan Widget terpilih() yang berbeda untuk diperbaiki.

tolong beri tahu saya apakah ada solusi untuk Chosen v1.4.2?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

Tambahkan ini ke div induk yang berisi tata letak. Dalam kasus saya itu adalah sub div dialog Modal yang memiliki _overflow-y: auto_ dan menggantinya dengan _overflow-y: visible_ bekerja untuk saya.

Apakah ada solusi untuk masalah ini belum?

Proyek ini mendapat tanggapan Anda:
http://jsbin.com/finufihaji/edit?html

Mencari sedikit dan melakukan tes adalah solusi paling dasar.

Saya harus mengganti .chosen-drop dan .chosen-results dan mengatur ketinggian tetap ke keduanya agar semua opsi dapat dipilih dan tidak terpengaruh oleh div overflow directive induk

Setidaknya ini berfungsi untuk saya dan sebagian besar bidang yang saya pilih hanya memiliki 3 atau 4 opsi. Hanya 1 (yang disembunyikan) memiliki sekitar 12 dan dapat tumbuh dalam waktu dekat.

Saya menerapkan yang berikut ini ke div induk yang memiliki overflow: hidden

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

Sumber: Stack Overflow

@doowruc Retasan hebat!

Apakah ada metode untuk melampirkan dropdown yang dipilih ke target tertentu, sehingga kami dapat melampirkannya ke badan dokumen alih-alih dialog? cara yang dipilih ini mengalir keluar dari dialog dan tidak terkandung di dalamnya?

.ui-dialog-content{
    overflow:visible !important;
 }

Bekerja untuk saya.

Saya tahu bahwa saya masih berjuang dengan ini. Berikut adalah Fiddle yang menunjukkan opsi untuk memindahkan elemen ke dalam tubuh dan mengatur posisi absolut dengan andal, bahkan dengan pengguliran.

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
Saya pikir solusi saya akan membantu Anda