Chosen: Perbaiki untuk masalah lebar nol

Duplikat #92.

Saya harus melakukan perubahan ini pada perbaikan:
if (/px/.test(this.form_field_jq.css("width"))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} lain {
this.f_width = this.form_field_jq.css("lebar");
}
sejak this.form_field_jq.css("lebar"); mengembalikan lebar dengan px di akhir

Saya punya solusi, dan ini berfungsi dengan baik di proyek saya:

this.f_width = this.form_field_jq.outerWidth(); // tambahkan kode di bawah ini di bawah baris ini di selected.jqeury.js

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

Semoga ini bisa membantu seseorang, karena ini berfungsi dengan baik di proyek saya.

Saya baru saja menambahkan aturan CSS berikut:

.chosen-container
{
    width: 100% !important;
}

Terima kasih fabioduque! Mengatur css untuk wadah yang dipilih memecahkan masalah saya!

Anda benar-benar tidak perlu mengatur lebar di CSS. Anda dapat melakukannya dengan benar ketika Anda menginisialisasi Terpilih.

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

Sebenarnya, saya membuat KO bindingHandler untuk menghasilkan elemen yang saya pilih, dan tidak semuanya memiliki lebar 100%, jadi CSS adalah cara yang tepat untuk saya. Meskipun saya dapat mengatur lebar sebagai opsi di bindingHandler saya.

Terima kasih @fabioduque Ini juga berhasil untuk saya!

@pfiller , terima kasih! yang memecahkan masalah saya.

mengapa hal ini kadang-kadang terjadi? :(

Saya menggunakan pendekatan css, karena saya tidak ingin melihat semua tempat yang saya gunakan dipilih (dan pengembang lain mungkin memiliki masalah yang sama ketika membangun tampilan baru). Jadi css memperbaiki masalah secara global. Terima kasih @fabioduque

Saya mengalami masalah ini dengan logika kondisional di salah satu plugin WordPress saya ... khususnya dengan lebar yang disetel ke 0px ... bahkan setelah init (yang saya antri bidang yang dipilih dengan chosen:ready jadi jika sudah init dan saya menyembunyikan div induk) ... tapi bagaimanapun, inilah yang saya gunakan untuk memperbaikinya ketika kode jQuery saya berjalan untuk menampilkan elemen DIV induk sebelum mengeksekusi chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

Jika ada orang lain yang masih mengalami masalah ini, periksa kapan Anda memanggil $(".chosen-select").chosen(). Saya memiliki daftar panggilan fungsi javascript pada pemuatan halaman, ketika saya memindahkan panggilan .chosen() ke bagian atas daftar itu menerapkan lebar dengan benar, tidak ada lagi lebar nol. Fungsi yang saya pindahkan di atas adalah mengambil beberapa data dan melakukan banyak operasi dom.

mengapa saya memiliki 2 ikon pencarian, saya mencoba kedua solusi di atas-