Chosen: Исправить проблему нулевой ширины

Дубликат № 92.

Мне пришлось внести это изменение в исправление:
if (/px/.test(this.form_field_jq.css("width "))) {
this.f_width = this.form_field_jq.css ("ширина"). replace ("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;
}

Спасибо, fabioduque! Установка css для выбранного контейнера решила мою проблему!

Вам действительно не нужно устанавливать ширину в CSS. Вы можете сделать это правильно при инициализации Chosen.

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

Фактически, я создал KO bindingHandler для генерации выбранных мной элементов, и не все из них имеют 100% ширину, поэтому CSS - лучший вариант для меня. Несмотря на то, что я мог установить ширину как параметр в моем bindingHandler.

Спасибо @fabioduque У меня тоже сработало!

@pfiller , спасибо! это решило мою проблему.

почему это иногда случается? :(

Я использовал подход css, потому что не хотел просматривать все выбранные мной места (и у других разработчиков может быть такая же проблема при создании новых представлений). Таким образом, css решает проблему глобально. Спасибо @fabioduque

Я столкнулся с этой проблемой с условной логикой в ​​одном из моих плагинов WordPress ... в частности, с шириной, установленной на 0 пикселей ... даже после инициализации (которую я помещаю в очередь выбранных полей с chosen:ready поэтому, если он уже инициализирован и я скрываю родительский 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 (). У меня был список вызовов функций javascript при загрузке страницы, когда я переместил вызов .chosen () в верхнюю часть списка, он правильно применил ширину, больше не нулевую ширину. Функции, которые я переместил выше, извлекали некоторые данные и выполняли множество операций с dom.

почему у меня есть 2 значка поиска, я попробовал оба из вышеперечисленных решений -