Chosen: إصلاح لمشكلة العرض الصفري

تكرار # 92.

اضطررت لإجراء هذا التغيير على الإصلاح:
إذا (/px/.test(this.form_field_jq.css("width "))) {
this.f_width = this.form_field_jq.css ("العرض"). استبدل ("px"، "")؛
} آخر {
this.f_width = this.form_field_jq.css ("العرض") ؛
}
منذ this.form_field_jq.css ("العرض") ؛ كان يعيد العرض مع بكسل في النهاية

لدي حل وهذا يعمل بشكل جيد في مشروعي:

this.f_width = this.form_field_jq.outerWidth () ، // أضف الكود أدناه تحت هذا السطر في 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;
  }

آمل أن يساعد هذا شخصًا ما ، لأنه يعمل بشكل جيد في مشروعي.

لقد أضفت للتو قاعدة CSS التالية:

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

شكرا فابيودوك! أدى تعيين css للحاوية المختارة إلى حل مشكلتي!

لا تحتاج حقًا إلى ضبط العرض في CSS. يمكنك القيام بذلك بشكل صحيح عند تهيئة Chosen.

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

في الواقع ، لقد قمت بإنشاء أداة ربط KO لإنشاء عناصري المختارة ، وليس كلهم ​​لديهم عرض 100٪ ، لذا فإن CSS هي الطريقة المناسبة لي. على الرغم من أنه يمكنني ضبط العرض كخيار في أداة الربط الخاصة بي.

شكرا fabioduque كما عملت بالنسبة لي!

pfiller ، شكرا لك! التي حلت مشكلتي.

لماذا يحدث هذا احيانا :(

لقد استخدمت نهج css ، لأنني لم أرغب في البحث عن جميع الأماكن التي اخترتها (وقد يواجه المطورون الآخرون نفس المشكلة عند إنشاء طرق عرض جديدة). لذا فإن css يصلح المشكلة على الصعيد العالمي. شكرا fabioduque

كنت أواجه هذه المشكلة مع المنطق الشرطي في أحد مكونات WordPress الإضافية الخاصة بي ... تحديدًا مع ضبط العرض على 0 بكسل ... حتى بعد init (التي أقوم بوضع الحقول المختارة في قائمة انتظار بـ chosen:ready لذا إذا كان الأمر init بالفعل وأنا أخفي div الأصل) ... ولكن على أي حال ، هذا ما استخدمته لإصلاح هذا عندما يتم تشغيل كود jQuery لإظهار عنصر DIV الأصلي قبل تنفيذ 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' );

إذا كان أي شخص آخر لا يزال يواجه هذه المشكلة ، فتحقق من اتصالك بـ $ (". selected-select"). selected (). كان لدي قائمة باستدعاءات وظائف جافا سكريبت عند تحميل الصفحة ، عندما قمت بنقل استدعاء () المختار إلى أعلى القائمة ، طبقت العرض بشكل صحيح ، ولم يعد هناك عرض صفري. كانت الوظائف التي قمت بنقلها أعلاه هي استرداد بعض البيانات وإجراء الكثير من عمليات dom.

لماذا لدي رمز بحث 2 ، لقد جربت كلا الحلين أعلاه-