Chosen: 너비가 0인 문제 수정

#92의 복제품입니다.

수정 사항에 대해 다음과 같이 변경해야 했습니다.
if (/px/.test(this.form_field_jq.css("너비"))){
this.f_width = this.form_field_jq.css("너비").replace("픽셀", "");
} 또 다른 {
this.f_width = this.form_field_jq.css("너비");
}
this.form_field_jq.css("width"); 끝에 px가 있는 너비를 반환했습니다.

솔루션이 있으며 이것은 내 프로젝트에서 잘 작동합니다.

this.f_width = this.form_field_jq.outerWidth(); // selected.jqery.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 플러그인 중 하나에서 조건부 논리로 이 문제가 발생했습니다. 특히 너비가 0px로 설정되어 있습니다... 초기화 후에도(선택한 필드를 chosen:ready 대기열에 추가하므로 이미 초기화되어 있는 경우) 그리고 부모 div를 숨깁니다) ... 하지만 어쨌든 이것은 chosen:updated 실행하기 전에 상위 DIV 요소를 표시하기 위해 jQuery 코드가 실행될 때 이 문제를 해결하는 데 사용한 것입니다.

// 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' );

다른 사람이 여전히 이 문제를 겪고 있다면 $(".chosen-select").chosen()을 호출할 때 확인하십시오. 페이지 로드 시 자바스크립트 함수 호출 목록이 있었는데 .chosen() 호출을 목록 맨 위로 이동했을 때 너비가 더 이상 0이 아닌 적절하게 적용되었습니다. 위에서 이동한 기능은 일부 데이터를 검색하고 많은 dom 작업을 수행하는 것이었습니다.

검색 아이콘이 2개 있는 이유는 위의 두 가지 솔루션을 모두 시도한 것입니다.