Chosen: jika pilih awalnya disembunyikan, tidak berfungsi

Ya, Anda harus menambal skrip kopi. Saya juga menyukai kemampuan untuk mengatur elemen tersembunyi.

+1 mengalami masalah ini hari ini

+1 seperti yang saya lakukan

Sebagai solusinya, Anda dapat mengatur lebar div dengan flag !important :

#my_select_chzn {
  width: 100% !important;
}

Sebenarnya, ini akan membuat Anda lebih dekat ke tempat yang Anda inginkan. Lebarnya tidak sempurna, tetapi semuanya akan terlihat.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Versi Terpilih sebelumnya benar-benar diuji untuk melihat apakah lebar bidang formulir diatur melalui css. Jika demikian, itu tidak menggunakan perhitungan lebar. Saya pikir saya lebih suka metode perbaikan ini untuk menambahkan 30 baris kode untuk menguji elemen tersembunyi. Apakah hal seperti ini akan berhasil untuk Anda?

Tetapkan lebarnya:

  <select style="width:350px;" class="chzn-select">

Tes JS untuk mengatur lebar terlebih dahulu:

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller ada bug kecil di kode Anda. Jika gaya sebaris memiliki lebar di unit apa pun selain piksel (seperti em), kode akan menafsirkannya sebagai piksel. lihat baris 56 di selected.jquery.coffee

Saya pikir orang akan terus mengeluh tentang hal itu dan pada akhirnya Anda harus menambahkan 30 baris kode itu.

Hai @pfiller , itu tidak berhasil. Baik width() dan css("width") mengembalikan 0 untuk elemen tersembunyi. Saya menggunakan teknik getHiddenDimensions dan itu bekerja dengan baik.

btw, Anda perlu menggunakannya untuk f_width dan juga di get_side_border_padding

+1 untuk ini.

Banyak logika di situs tempat saya mengintegrasikan Terpilih bergantung pada beberapa pilihan yang disembunyikan pada pemuatan pertama, jadi kami mendapatkan semua jenis masalah dengan ini.

+1 juga. Pemeriksaan visibilitas harus dibangun.

:+1: :+1: :+1:

Bagaimana dengan solusi di mana lebar dropdown tidak diatur secara permanen pada startup pertama, dan hanya diubah ukurannya menjadi lebar kotak teks saat dibuka? Dengan begitu Anda tidak perlu menyentuh lebar input, anggap saja sudah disetel dengan css dan baca setiap kali Anda membuka dropdown.

+1 untuk ini. Saya telah memutuskan untuk mengubah Terpilih menjadi tipe bidang untuk ExpressionEngine CMS, tetapi tata letak publikasi EE memungkinkan bidang disembunyikan pada pemuatan halaman.

Saya tidak yakin apakah ini terkait, tetapi dalam kasus EE akan lebih baik jika lebarnya cair, atau selalu 100% dari elemen yang mengandungnya ...

http://www.alistapart.com/articles/now-you-see-me/

Menabrak yang ini ... itu masih terjadi di versi terbaru

+1
Bug ini memblokir penggunaan plugin Terpilih untuk aplikasi internal di Netflix

:+1: tentang masalah ini, mengalami masalah ini hari ini

Anda dapat menyembunyikan konten Anda dengan: position: absolute; kiri: -999em;
Dengan cara ini, pembaca layar dan Google juga dapat "membacanya", dan tarik-turun Pilihan Anda AKAN terlihat saat menampilkannya lagi.

Permintaan tarik saya memperbaiki masalah ini, tetapi seperti permintaan saya yang lain dan banyak permintaan untuk dipilih, mereka diabaikan. Proyek ini memiliki terlalu banyak kontributor dengan basis kode yang terlalu kecil.

DelvarWorld, terima kasih atas tambalan Anda. Ini telah mengganggu saya, dan saya baru saja akan menerapkan solusi serupa dan berpikir saya akan memeriksa ulang untuk melihat apakah ada yang sudah melakukannya.

Saya akan menerapkan ini ke kode produksi segera setelah saya mengujinya.

@DelvarWorld permintaan tarik apa yang Anda maksud? Saya melihat satu permintaan tarik terbuka dari Anda dan itu tidak mengatasi masalah ini.

@pfiller Yang tercantum di atas di utas ini, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Lebih penting daripada menggunakan css adalah menggunakan lebar elemen "saat ini" saat merender hasil, daripada menggunakan lebar cache yang salah dari konstruksi Terpilih.

Ada banyak perubahan, dan saya tidak yakin cara terbaik untuk menggabungkannya sendiri. Apakah Anda akan segera memiliki versi gabungan?

@bewest permintaan tarik saya melakukan itu, setiap kali dropdown ditampilkan, itu cocok dengan lebar elemen

@delvarworld Saya tahu, hanya memastikan perbedaan yang tepat dibuat.

Bisakah Anda mencoba memperbarui cabang lebar otomatis Anda dengan HEAD? Saya mencoba menggabungkan dari checkout serupa sekitar akhir Agustus, tetapi kotak input sekarang memiliki lebar yang salah (terlalu lebar, melebihi lebar wadah yang dipilih).

Saya sedang melihat-lihat, tetapi ada juga beberapa re-organisasi ... konstruktor telah dihapus demi metode setup dan finish_setup. Saya juga tidak terbiasa dengan coffeescript sehingga kemajuan Anda dalam penggabungan mungkin lebih cepat daripada saya dan mengirimkan permintaan tarik bantuan saya, karena tampaknya ada banyak minat dalam masalah ini.

Sebenarnya, cabang saya telah menyimpang melewati perubahan itu, dan akhirnya saya menyerah mengerjakan versi prototipe. Salah saya, dan saya pikir pada titik ini tidak dapat digabungkan.

@DevarWorld Ya, itu perlu dikerjakan ulang sedikit agar beberapa bit masuk dalam implementasi Abstrak. Ini akan membuatnya lebih mudah untuk mempertahankan perbedaan antara prototipe dan jquery.

Apakah Anda bersedia mencobanya lagi?

Benjolan sopan ... ada yang mengerjakan ini?

Terpilih tidak berfungsi untuk saya karena menyembunyikan pilihan saya, dan kemudian tidak dapat menghitung lebarnya. Saya harus meretasnya dengan mengatur lebar secara sewenang-wenang pada setiap komponen chzn di CSS. Sepertinya ini bukan cara kerjanya, dan itu benar-benar tidak terlihat normal seperti di situs web yang pernah saya lihat.

Saya juga mengalami masalah ini. Ternyata, metode yang dipilih digunakan untuk mendapatkan lebar elemen rusak di versi jquery sebelumnya (maaf, tapi saya tidak memiliki nomor versi persisnya). Seperti disebutkan di atas, bug adalah ketika suatu elemen tidak terlihat, lebarnya akan kembali 0. Bug ini didokumentasikan dengan sangat baik, dan ada banyak cara untuk mengatasinya.

Solusi bagi kami adalah cukup mengupgrade ke versi terbaru Jquery. Ya, kami harus melakukan beberapa penambalan dan pengujian kode lama yang menggunakan jquery, tetapi dalam jangka panjang ini memperbaiki banyak masalah dan mengurangi kebutuhan akan peretasan kecil di seluruh js/css Anda.

Saya menginstal jquery terbaru yang dikemas dalam permata Rails jquery dan jquery-ujs. Saya kira ini masih terlalu tua?

Ya, nomor versi yang sebenarnya akan menyenangkan untuk dimiliki. Saya dapat mengonfirmasi 1.6.2 adalah
terlalu tua juga.

Pada Rabu, 16 Nov 2011 pukul 11:23, Kevin Elliott <
[email protected]

menulis:

Saya menginstal jquery terbaru yang dikemas dalam permata Rails jquery
dan jquery-ujs. Saya kira ini masih terlalu tua?

@RoyJacobs newest saat ini adalah 1.7 karena telah dirilis.

@RoyJacobs Saya dapat mengonfirmasi bahwa kami menggunakan 1.6.4 tanpa masalah.

Ini aneh. Ya permata jquery-rails menggunakan jQuery 1.7. Tapi itu masih tidak bekerja untuk saya.

Anda dapat melihat bahwa itu tidak dirender dengan lebar. Inspeksi menunjukkan semua lebar yang dihitung menjadi 0px. Ini terjadi bahkan jika saya menyetel .chzn-select agar memiliki lebar di CSS atau langsung di parameter gaya tag pilih.

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

Tentu menjengkelkan. Pilihan tampaknya mendapatkan tampilan: tidak ada (saya berasumsi dari javascript yang dipilih), dan saya hanya dapat membayangkan bahwa itu tidak dapat menghitung lebar dengan benar.

Pikiran?

Saya benar-benar berharap saya bisa membuat ini berfungsi dalam keadaan APAPUN (bahkan jika saya harus memaksanya). Sepertinya tidak ada yang berhasil. Saya akan dipaksa untuk meninggalkan ini sepenuhnya (dan saya pasti tidak ingin berurusan dengan barang rusak ini lagi).

Pastikan pilihan Anda memiliki beberapa CSS yang diterapkan, stylesheet atau inline. Jika Anda melakukannya dengan stylesheet itu berarti Anda harus menyuntikkan elemen ke dalam DOM sebelum Anda memanggil selected().

Tapi saya setuju bahwa mendapatkan hak ini sangat sulit. Saya benar-benar ingin dapat menerapkan lebar ke pilih yang dipilih melalui CSS. Satu kelas, satu lebar, px atau %.
CSS saya kemudian akan terlihat seperti

.contoh pilih, .contoh .chzn-smth {
lebar: 50%;
}

Dan ini akan menerapkan lebar dengan benar tidak peduli bagaimana atau kapan atau di mana Anda menelepon dipilih.

Saya telah mencobanya sebaris dan melalui stylesheet tanpa perubahan perilaku.

Masalah yang cukup besar untuk lightbox dan akordeon. Ada yang sedang mengerjakan patch?

Saya tidak berpikir siapa pun! Saya terkejut karena saya tidak mengerti bagaimana ini dapat digunakan untuk siapa pun. Saya bahkan tidak menyembunyikan konten saya secara artifisial. Panggilan terpilih() tampaknya melakukannya. Sangat aneh.

@kevinelliott Saya pikir mereka yang mengalami masalah ini telah pindah, atau menemukan perbaikan. Seperti yang saya katakan, dalam kasus kami ini hanya masalah memutakhirkan jquery. Perlu diingat juga bahwa kami telah menata gaya kamielemen memiliki lebar 224px dan kami menetapkan 'display: none;' langsung pada elemen dan bukan dalam lembar gaya.

Saya harap ini bermanfaat bagi Anda dan Anda dapat membuatnya bekerja.

Terima kasih Richard. Saya memutakhirkan jQuery saya dan itu tidak membantu. Yang aneh adalah saya tidak menyembunyikan elemen pilihan saya. Terpilih menyembunyikannya. Jadi saya bahkan tidak yakin apa yang terjadi.

@kevinelliott Np. Saya ingin tahu, apakah Anda mengatur lebar Anda?elemen sama sekali? Jika demikian, apakah Anda menggunakan persentase atau piksel?

Saya. Saya mengaturnya dengan piksel. Saya telah mencoba mengaturnya pada elemen secara langsung dengan atribut style, dan saya juga telah mencobanya di CSS.

@kevinelliott Sejujurnya saya agak bingung. Satu-satunya saran yang tersisa yang saya miliki adalah 1) bungkus elemen pilih dalam sebuah elemen (kami melakukan ini, dan kami bekerja dengan baik), dan 2) menelusuri perpustakaan yang dipilih untuk mencari tahu pada titik mana yang dipilih menyembunyikan elemen pilihan Anda ... Saya juga harus melakukan ini ketika kami menghadapi masalah kami.

Maaf saya tidak bisa lebih membantu.

Saya punya kasus, bahkan dengan lebar tetap di pilih yang dipilih buat lebar: 0px.
Saya tidak tahu mengapa, tidak bekerja pada situasi ini, dan bekerja pada orang lain ...

@tiagobrito : Saya memiliki masalah yang sama persis dan tidak pernah bisa menyelesaikannya, diperbaiki atau tidak.

@RichardBlair Terima kasih atas bantuan Anda. Jika Anda memikirkan hal lain, beri tahu kami :)

+
masalah yang sama, tolong, perbaiki

@tiagobrito , @dhampik dapatkah Anda mengumpulkan intisari kecil yang menunjukkan masalah?

@bewest saya sudah tahu! Itu ditambahkan ketika saya menggunakan jquery 1.4.x di proyek saya.
Senin depan saya akan memberi tahu Anda versi jquery yang benar yang menyebabkan saya lebar: 0px

@bewest saya juga konfirmasi,
versi jquery yang lama (saya kira, sebelumnya 1.6.4)
mengacaukan tata letak pilih, yang awalnya tersembunyi
Berikut adalah 2 biola:
tata letak kacau (jquery lama): http://jsfiddle.net/dhampik/2E9fG/
tata letak yang benar (jquery baru): http://jsfiddle.net/dhampik/Rs9Z3/

Terima kasih Tuhan, versi jquery telah diperbarui dengan versi baru kerangka Yii yang akan datang)

Saya memiliki masalah ini ketika saya mencoba mengintegrasikan Terpilih ke Trac. Kotak pilih awal dalam bentuk properti tiket memiliki lebar 0. Properti disembunyikan secara default dan dapat diperluas dengan mengklik tautan. jQuery v1.7.1

Pembaruan: Saya mengatasi masalah ini karena setidaknya trik CSS yang disebutkan dalam posting blog foliotek tidak berfungsi dengan jQuery 1.7.1. Saya belum mencoba pendekatan JS.

Solusi saya (untuk Trac):

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

bagi mereka yang menggunakan jQuery <= 1.7.1

Saya mengatasi masalah ini menggunakan jQuery Aktual
Mengubah selected.jquery.js#301 dari
this.f_width = this.form_field_jq.outerWidth();
ke
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//edit terima kasih @koenpunt untuk komentar 1.7.2

@midday Menurut README dari jquery.actual ini hanya diperlukan untuk versi jQuery sebelum 1.7.2

Versi jQuery yang lebih lama (> = 1.7.1) mengalami kesulitan menemukan lebar/tinggi elemen DOM yang tidak terlihat.

@midday terima kasih telah menemukan itu, setelah mengimplementasikan plugin yang sebenarnya itu memperbaiki masalah dengan yang dipilih

Saya masih mengalami masalah ini, ada ide bagaimana cara memperbaikinya?

Sama di sini masih menjadi masalah - saya tidak percaya ini telah berlangsung selama bertahun-tahun ...

Saya juga mengalami masalah ini. Akan senang membantu.

Trik CSS ini tampaknya berhasil:

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopiazza. Itu memperbaiki masalah bagi saya. Terima kasih.

FWIW Saya telah menemukan bahwa pengaturan min-width (bahkan tanpa !important) pada .chzn-container, .chzn-drop, dan input .chzn-search juga berfungsi untuk pilihan yang awalnya disembunyikan.

Solusi saya

css:

.chzn-container, .chzn-drop {
    width: 100% !important;
}

html:

alih-alih mengatur lebar di elemen pilih, saya memilih untuk menambahkan div pembungkus ke elemen pilih asli dan mengatur lebar pembungkus.

Terpilih sekarang menawarkan opsi untuk menginisialisasi dengan lebar yang ditetapkan yang mengesampingkan upaya perhitungan apa pun. Ini mungkin solusi yang memuaskan untuk sebagian besar kasus penggunaan di mana pilih disembunyikan pada titik inisialisasi:

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

Saya pikir solusi ini mungkin seperti yang akan kita lakukan untuk memperbaiki bug ini. Saya benar-benar ingin menghindari menyertakan kode yang memindahkan pilihan dari layar untuk diukur karena akan menambah lebih banyak kerumitan.

Adakah yang punya masalah dengan menutup bug ini berdasarkan solusi ini?

Saya menggunakan versi 0.9.8 dan pilihan tersembunyi saya berfungsi normal. Hari ini saya telah memperbarui lakukan 0.9.14 dan mereka berhenti bekerja. Saya menggunakan versi yang diperkecil. Ketika saya mengubah ke versi normal semuanya berfungsi dengan baik lagi (chosen.jquery.js 0.9.14). Apakah itu normal? Ini kesalahan dalam proses minnifying?

Tidak ada yang disembunyikan tidak berfungsi untuk saya di jQuery min atau ukuran penuh 0.9.14.

Opsi baru 'lebar' bekerja untuk saya. Bekerja, setidaknya, untuk input baru yang dipilih yang sebelumnya disembunyikan.

@trisweb Ini adalah proyek sumber terbuka dan permusuhan tidak diterima di sini. Ada banyak orang di sini yang telah memberikan banyak waktu dan energi untuk membuat Terpilih seperti sekarang ini. Silakan coba berkontribusi pada peningkatan proyek atau jangan berkomentar. Terima kasih.

@kenearley Saya sepenuhnya menyadari etiket open source dan seharusnya merancang komentar saya agar lebih efektif. Maaf tentang itu.

Yang mengatakan, saya benar-benar berpikir kadang-kadang Anda membutuhkan seseorang untuk berteriak atas semua kebisingan.

Saya mengusulkan bahwa nilai nol untuk lebar setiap elemen yang dipilih tidak logis, dan beberapa metode yang dapat diandalkan harus dirancang untuk menentukan lebar yang benar. Jika gagal, default yang wajar harus digunakan, dan karena berbagai alasan yang harus jelas, nol bukanlah default yang masuk akal.

Ini mungkin masalah yang sulit, itulah sebabnya bug ini telah ada begitu lama, tapi saya yakin ada beberapa solusi. Secara pribadi saya tidak berpikir atribut 'lebar' baru menyelesaikan masalah, karena ini masih bergantung pada konfigurasi lebih dari konvensi, dan dengan demikian dapat menghasilkan lebar nol yang tidak berfungsi yang dipilih dalam kasus default.

Yang mengatakan, saya benar-benar berpikir kadang-kadang Anda membutuhkan seseorang untuk berteriak atas semua kebisingan.

Tidak. Tidak perlu 'meneriaki kebisingan.' Jika seseorang merasa cukup kuat tentang bagaimana kode harus ditulis, mereka dapat menawarkan permintaan tarik atau garpu repo dan perubahan sesuai keinginan.

Karena itu, saya menghargai tindak lanjut Anda dan setuju bahwa solusi saat ini tidak ideal. Saat kami bergerak maju, kami akan mencari solusi yang lebih baik dan akan sangat menghargai permintaan tarik oleh siapa saja yang tertarik untuk mengubah ini.

@kenearley Saya dengan sopan tidak setuju dengan pendapat Anda tentang retorika — tetapi tentu saja kode berbicara lebih keras daripada kata-kata. Ini adalah masalah yang menjengkelkan bagi kami saat ini sehingga permintaan tarik mungkin akan datang jika saya menemukan solusi yang baik.

:+1: untuk perbaikan!

Saya telah memperhatikan Terpilih selama hampir dua tahun sekarang, dan itu masih merupakan peningkatan UI terpilih yang paling elegan. Tetapi masalah tersembunyi ini masih merupakan pemecah masalah besar, dan lebar 100% bukanlah solusi.
+1 untuk memperbaiki ini. Pergi tim yang dipilih!

+1 untuk perbaikan

Selain solusi resmi yang memungkinkan penelepon untuk mengatur lebar secara terprogram, saya juga menyarankan solusi yang layak, berdasarkan utas berikut:

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

Solusinya pada dasarnya bergantung pada fungsi ini:

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

Yang kemudian dipanggil oleh mod berikut dari kode jquery.chosen (mulai 1.0.0):

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

Lihat juga #795 untuk detail lebih lanjut tentang ini.

Perbaikan cepat. Alih-alih menyembunyikan select lakukan $(elem).chosen(options) dan kemudian $(elem).hide() yaitu pertama-tama buat elemen yang dipilih lalu sembunyikan. Dengan cara itu width dipertahankan.

Apakah ini belum diperbaiki, 3 tahun terbuka?

+1 untuk perbaikan ini

Versi 0.9.8 tidak memiliki bug ini! Anda dulu memanggil jquery outerWidth untuk mendapatkan lebar, sekarang Anda menggunakan HTML offsetWidth, yang menghasilkan nol...

Saya percaya maksudnya adalah regresi, yang menjanjikan. Apakah ada di sana?
alasan untuk beralih dari metode jQuery?

@pfiller Saya mengalami masalah ini menggunakan jQuery 1.10.2 dan solusi $("select").chosen({ width: '50%' }); bekerja dengan baik untuk saya. Ini adalah solusi yang bisa diterapkan untuk kasus penggunaan saya.

Saya menggunakan $(this.form_field).outerWidth() untuk mendapatkan lebar offset, di bawah kode lengkapnya:

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1 Saya sangat membutuhkan perbaikan ini. Saya menyembunyikan formulir secara default dan pengguna harus mengklik tombol untuk menampilkannya. Karena disembunyikan, itu tidak mengatur lebar pilihan saya dengan benar

@henesnarfel - Anda mungkin ingin mencoba menggunakan solusi yang diposting @pfiller di sini: https://github.com/harvethq/chosen/issues/92#issuecomment -18163306

gan, masalah masih ada. Harus ada solusi bawaan untuk ini. Saya akan memberi +1 itu.

Satu-satunya cara yang dapat saya pikirkan adalah pergi ke baris 455 (setidaknya pada editor saya), yang mengembalikan kode berikut dari fungsi container_width :

return "" + this.form_field.offsetWidth + "px";

dan menggantinya dengan

return "" + $(this.form_field).outerWidth() + "px";

Masalahnya menghilang.

@ayyash tidak memperbaiki masalah sepenuhnya. Hanya membuatnya lebih baik dari lebar 0.

Bagi saya, ini berhasil (isi ukuran Anda sendiri untuk kesenangan):

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

Terima kasih

@Thinklabsnk Terima kasih, perbaikan yang bagus dan cepat.

EDIT: Ini hanya berfungsi jika semua elemen pilihan Anda akan memiliki lebar yang sama.

Inilah solusi saya untuk ini, berdasarkan beberapa saran lain. Ini mengkloning input tersembunyi dan menambahkannya ke tubuh untuk mengukur lebar, tetapi juga mengatur visibilitas klon menjadi tersembunyi sebelum menambahkan, sehingga tidak akan ditampilkan di layar.

Temukan baris kode ini di selected.jquery.js (baris 455 dalam versi saya):

        return "" + this.form_field.offsetWidth + "px";

dan ganti dengan ini:

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

Semoga membantu.

@danjjohnson Terima kasih, itu berhasil!

Satu-satunya hal yang harus saya ubah:

clone.offsetWidth; 

ke

clone.outerWidth();

Untuk beberapa alasan, clone.offsetWidth memberi saya nilai yang tidak ditentukan.

Salam,

Bug ini terjadi di Firefox, tidak pernah menguji di Chrome, atau lainnya.

gambar pertama (di atas)
Lebar set yang dipilih karena memiliki bilah gulir sementara tidak. Ini adalah hasil yang salah.

gambar ke-2 (tengah)
Dipilih set lebar karena memiliki bilah gulir seperti gambar pertama tetapi kali ini memiliki bilah gulir yang benar.

gambar ke 3 (bawah)
Beginilah seharusnya gambar pertama saat tidak memiliki bilah gulir. Tes ini saya mengatur lebar yang dipilih menjadi width: 100% !important

: thumbsup: untuk @danjjohnson 's memperbaiki dengan @johnmerced' s modifikasi

Saya memiliki perbaikan lain, sederhana dan berfungsi. Intinya jangan biarkan lebarnya menjadi nol:

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

Halo,
solusi saya untuk masalah ini adalah kombinasi dari solusi yang sampai sekarang diposting (dipilih 1.2.0):

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

Cukup tentukan lebar css statis dalam px untuk pilihan tersembunyi.

Perbaikan keseluruhan masih diperlukan.

Masalahnya di sini adalah jika Anda mengubah ukuran jendela, pilih selalu muncul dengan ukuran yang sama seperti yang diinisialisasi. Saya pikir solusi yang lebih baik adalah mengubah ukuran pilih ketika ditampilkan atau ketika jendela diubah ukurannya, daripada menebak lebar yang harus diambil saat inisialisasi ketika disembunyikan.

Apakah tidak ada cara untuk mengubah ukuran objek yang dipilih secara dinamis? Karena saya tahu kapan harus mengubah ukuran (mengubah ukuran acara atau onShow atau serupa), itu bisa menjadi solusi. Apakah ada fungsi API untuk mengubah ukuran objek yang dipilih? Atau menginisialisasi ulang entah bagaimana?

:+1: untuk perbaikan. Berlari ke ini hari ini

:+1: Membuang _way_ terlalu banyak waktu untuk melacak ini.

Masih mengalami masalah dengan ukuran di modals. Adakah rencana untuk memperbaikinya dalam rilis 4.0?

@danjjohnson perbaikan Anda tidak memperbaiki masalah ketika elemen pertama jauh lebih kecil dari yang lain

berdasarkan @danjjohnson itulah yang berhasil untuk saya

retas

temukan garis

return "" + this.form_field.offsetWidth + "px";

ubah dengan

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$('pilih').chosen({lebar: '100%'}); oleh @pfiller bekerja untuk saya di panel yang dapat dilipat.

Terima kasih

Bagaimana saya bisa menyingkirkan kelas pencarian yang dipilih karena saya tidak dapat memuat aset di direktori proyek saya?

Saya harus menambahkan batas waktu, saat memuat pilihan statis dari templat yang belum dirender. Tidak ada dalam hierarki yang memiliki metrik ketika mencoba inisialisasi. Membungkusnya dalam batas waktu nol setidaknya menabrak inisialisasi ke akhir antrian acara..

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

Saya baru saja digigit oleh bug ini, 100% memperbaiki masalah untuk saya.

@harvethq apakah Anda akan menerima permintaan tarik untuk memperbaiki ini? Belum yakin tentang solusi terbaik, tetapi saya akan dengan senang hati memperbaiki dan membuat permintaan tarik :heart:

Solusi yang kuat untuk ini adalah dengan menggunakan ng-if alih-alih ng-show. Bekerja dengan sempurna dan sederhana.

Saya telah menemukan bahwa ng-if adalah pilihan yang lebih disukai dalam banyak situasi. Tidak hanya memperbaiki ng-select yang rusak, tetapi juga memungkinkan pengontrol rekursif (menggunakan kombinasi ng-if, ng-controller, ng-init dan ng-template).

jadi sepertinya masalah 4 tahun ini masih belum terselesaikan?!?!

+1

+1 sementara itu... Saya menggunakan select2

Apakah ada cara untuk memiliki pemintal di area yang berkembang ketika diklik daftar pilihan yang dipilih, Itu harus terjadi saat data ditambahkan ke jquery yang dipilih. Saya sedang memproses sejumlah besar catatan menjadi jquery yang dipilih dan butuh waktu untuk memproses dan menunjukkannya. ??

Sungguh bug 5 tahun yang epik ... dan masih menggigit orang (aduh!).

Google memiliki bug serupa dengan peta mereka yang tidak ditampilkan dengan benar di div tersembunyi. namun kedua masalah ini memiliki solusi yang mudah diterapkan.

Ya, saya menemukan bug peta google itu beberapa waktu tahun lalu IIRC, tetapi berapa banyak orang yang menghabiskan setengah hari mengutuk dan mencoba berbagai hal sebelum menemukan laporan ini? Bug seperti ini di perpustakaan populer menghabiskan waktu berjam-jam. Dikalikan dengan jumlah orang yang mempelajari salah satu perpustakaan ini setiap tahun, biaya agregatnya mungkin mengejutkan... Jika mereka tidak akan memperbaikinya, tidak apa-apa. Memperbaikinya pada titik ini mungkin berinteraksi secara aneh dengan sejumlah besar solusi yang disebarkan mungkin... Dalam hal ini mereka harus mengakui bahwa mereka tidak memperbaikinya dan mendokumentasikan solusi di suatu tempat yang menonjol dalam dokumentasi sehingga orang tidak kesulitan untuk membuat (atau miss) tenggat waktu atas hal ini.

Perbaikan "keseluruhan" saya mirip dengan yang lain, dan itu mengasumsikan bahwa semua lebar pilihan saya di markup adalah 100% dari div induknya. Kami menggunakan bootstrap jadi ini kasus kami.

Jalankan kode ini tepat setelah Anda menginisialisasi .chosen() saat memuat halaman.

```
$(".chosen-container").each(function(i, elem) {
if ($(elemen).lebar() == 0) {
$(elemen).lebar("100%");
}
});
````

Bagi Anda yang memiliki masalah di mana jika elemen awalnya berada di dalam wadah tersembunyi css, dan kemudian ketika dibuat terlihat memiliki lebar 0px - perbaikan yang saya temukan adalah mengatur lebar di js config;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Lalu saya memberikan input pilih kelas css dipilih-pilih-lebar

<select name="f01" class="chosen-select-width" id="item_select_staff">

Tampaknya melakukan trik dengan v1.6.2 dan jquery versi yang dipilih 3.1.1.

Saya hanya meninggalkan opsi lebar yang dipilih default (otomatis) dan menambahkan

.chosen-container { min-width:5em; }

ke CSS situs saya (menyesuaikan lebar minimum sesuai kebutuhan). Ini membuatnya tidak pernah menjadi 0px (atau terlalu kecil untuk digunakan) sambil tetap menyesuaikan lebar ideal pilihan bila memungkinkan (memaksa lebar 100% atau sesuatu untuk efek itu tidak berfungsi dengan baik ketika Anda memiliki elemen pilihan yang sejalan dengan konten lain & ini metode mengatasi masalah inti serta memungkinkan untuk elemen pilih sebaris & tampaknya menawarkan implementasi paling sederhana & paling mudah).

Bagaimana ini masih rusak setelah TUJUH tahun?

Solusi saya dengan bootstrap 3 menambahkan gaya berikut:

.chosen-container {
    min-width: 90%;
}

Solusi saya dengan bootstrap 3 menambahkan gaya berikut:

.chosen-container {
    min-width: 90%;
}

Beli lalu dropdown tetap tidak muncul.... @koenvanderlinden

sudah didokumentasikan
https://harvethq.github.io/chosen/options.html
Periksa opsi width dan deskripsinya

@qbadev Meskipun ini membuatnya jadi elemen tidak berukuran agar sesuai dengan konten saat dibutuhkan jadi saya tidak benar-benar melihatnya sebagai perbaikan (terutama ketika menggunakan min-width memberikan hasil yang lebih baik dari ini).

Deskripsi dokumentasi secara efektif hanya memanggil bug (yang seharusnya dapat diselesaikan) dan menyebutkan menggunakannya sebagai solusi potensial untuk bug.

@koenvanderlinden merekomendasikan min-width:90%; jadi biasanya lebar 90% dengan lebar 100% jika konten pilih mengharuskannya. Kemudian lagi, saya masih memilih min-width:5em; (nilai em tepat bervariasi tergantung pada kasus penggunaan) sehingga tidak pernah terlalu kecil, tetapi masih mencoba untuk memperluas agar sesuai dengan konten pilihan daripada ukuran berdasarkan induk elemen.

@KZeni Saya tidak mengatakan ini adalah perbaikan. Itu hanya didokumentasikan. Dan itu adalah solusi yang bagus. Masalah utama saya adalah lebar Terpilih hampir 0 setelah init. Sekarang, setelah "memperbaiki", saya dapat melihat yang dipilih dan dapat melakukannya dengan apa pun yang saya inginkan menggunakan kelas CSS yang diterapkan ke elemen induk.

Saya menghadapi masalah seperti itu berkali-kali sebelumnya, yang tidak dapat dihitung karena objek berukuran 0 lebar. Itu tidak dapat diselesaikan secara universal, karena setiap aplikasi berbeda.
Jadi ketika yang dipilih terlihat pada saat init, tidak diperlukan tindakan, tetapi jika disembunyikan, menggunakan opsi width adalah cara yang harus digunakan.

Dukungan Lebar Kustom
Menggunakan lebar khusus dengan Terpilih semudah melewati opsi saat Anda membuat Terpilih:
$(".chosen-select").chosen({width: "95%"});

https://harvethq.github.io/chosen/

Saya menemukan masalah ini setelah jQuery memutakhirkan dari 1.* ke 3.* rilis.
Memecahkan itu:

dipilih.jquery.js:543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";