Chosen: select가 처음에 숨겨져 있으면 작동하지 않습니다.

예, 커피 스크립트를 패치해야 합니다. 또한 나는 숨겨진 요소를 설정하는 기능에 대한 것입니다.

오늘 이 문제에 +1이 발생했습니다.

+1 나처럼

이 문제를 해결하려면 !important 플래그를 사용하여 생성된 div 의 너비를 설정할 수 있습니다.

#my_select_chzn {
  width: 100% !important;
}

실제로, 이것은 당신이 있어야 할 곳에 더 가까워질 것입니다. 너비는 완벽하지 않지만 모든 것이 보일 것입니다.

#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;
}

Chosen의 이전 버전은 실제로 양식 필드 너비가 CSS를 통해 설정되었는지 확인하기 위해 테스트되었습니다. 그렇다면 너비 계산을 사용하지 않았습니다. 나는 숨겨진 요소를 테스트하기 위해 30줄의 코드를 추가하는 것보다 이 수정 방법을 선호한다고 생각합니다. 이 같은 것이 당신을 위해 작동합니까?

너비 설정:

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

JS는 먼저 너비 설정을 테스트합니다.

  <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 코드에 작은 버그가 있습니다. 인라인 스타일의 너비가 픽셀이 아닌 다른 단위(예: em)인 경우 코드는 이를 픽셀로 해석합니다. selected.jquery.coffee의 56행을 참조하십시오.

사람들이 계속해서 그것에 대해 불평할 것이고 결국에는 30줄의 코드를 추가해야 할 것입니다.

안녕하세요 @pfiller , 작동하지 않습니다. width() 및 css("width") 모두 숨겨진 요소에 대해 0을 반환합니다. getHiddenDimensions 기술을 사용하고 있으며 잘 작동합니다.

btw, f_width와 get_side_border_padding 모두에 사용해야 합니다.

이것에 대해 +1.

내가 Chosen을 통합하고 있는 사이트의 많은 논리는 첫 번째 로드 시 숨겨지는 일부 선택에 의존하므로 이에 대해 모든 종류의 문제가 발생합니다.

+1도 됩니다. 가시성 검사가 내장되어 있어야 합니다.

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

드롭다운 너비가 처음 시작할 때 영구적으로 설정되지 않고 열릴 때 텍스트 상자의 너비로 크기가 조정되는 솔루션은 어떻습니까? 그렇게하면 입력 너비를 건드릴 필요가 없습니다. CSS로 설정되어 있다고 가정하고 드롭 다운을 열 때마다 읽으십시오.

이것에 대해 +1. 나는 Chosen을 ExpressionEngine CMS의 필드 유형으로 바꾸기로 결정했지만 EE의 게시 레이아웃을 사용하면 페이지 로드 시 필드를 숨길 수 있습니다.

이것이 관련이 있는지 확실하지 않지만 EE의 경우 너비가 유동적이거나 단순히 항상 포함하는 요소의 100%인 것이 가장 좋습니다...

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

이 문제에 부딪쳤습니다 ... 최신 버전에서 여전히 발생하고 있습니다.

+1
이 버그는 Netflix의 내부 앱용 Chosen 플러그인 사용을 차단합니다.

:+1: 이 문제에 대해 오늘 이 문제가 발생했습니다.

다음을 사용하여 콘텐츠를 숨길 수 있습니다. position: absolute; 왼쪽: -999em;
이렇게 하면 스크린 리더와 Google도 이를 "읽을" 수 있으며 다시 표시할 때 선택 항목 드롭다운이 표시됩니다.

내 pull 요청은 이 문제를 해결하지만 내 다른 것과 마찬가지로 선택된 많은 요청이 무시됩니다. 이 프로젝트에는 코드 기반이 너무 작은 기여자가 너무 많습니다.

DelvarWorld, 패치에 감사드립니다. 이것은 저를 괴롭히고 있었고 비슷한 솔루션을 구현하려고했는데 이미 누군가가 그렇게했는지 다시 확인해야한다고 생각했습니다.

테스트한 후 곧 프로덕션 코드에 배포할 것입니다.

@DelvarWorld 어떤 풀 리퀘스트를 말씀하시는 건가요? 귀하의 공개 풀 요청이 하나 있으며 이 문제는 해결되지 않습니다.

@pfiller 이 스레드에서 위에 나열된 것, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

CSS를 사용하는 것보다 더 중요한 것은 Chosen 구성에서 잘못 캐시된 너비를 사용하는 대신 결과를 렌더링할 때 요소의 "현재" 너비를 사용하는 것입니다.

많은 변경 사항이 있었고 직접 병합하는 가장 좋은 방법이 확실하지 않습니다. 곧 병합된 버전이 있습니까?

@bewest 내 풀 요청은 드롭다운이 표시될 때마다 요소의 너비와 일치합니다.

@delvarworld 내가 아는 바로는 올바른 구별이 이루어졌는지 확인하는 것뿐입니다.

HEAD를 사용하여 자동 너비 분기를 최신 상태로 만들 수 있습니까? 8월 말경 비슷한 체크아웃에서 병합을 시도했지만 입력 상자가 이제 잘못된 너비입니다(너무 넓어서 선택한 컨테이너의 너비가 넘침).

살펴보고 있지만 일부 재구성도 있었습니다... setup 및 finish_setup 메소드를 위해 생성자가 제거되었습니다. 나는 또한 coffeescript에 익숙하지 않기 때문에 이 문제에 많은 관심이 있는 것 같기 때문에 병합 진행이 나보다 빠를 수 있고 풀 리퀘스트를 제출하는 것이 도움이 될 것입니다.

사실, 제 브랜치는 그 변화를 지나서 분기점이 되었고, 결국 저는 프로토타입 버전 작업을 포기했습니다. 내 잘못이며 현재로서는 병합할 수 없다고 생각합니다.

@DevarWorld 예, 추상 구현에 일부 비트가 들어갈 수 있도록 약간 재작업해야 합니다. 이렇게 하면 프로토타입과 jquery 간의 차이점을 더 쉽게 유지 관리할 수 있습니다.

한 번 더 시도해 보시겠습니까?

공손한 범프 ...이 작업을 수행하는 사람이 있습니까?

선택은 내 선택을 숨기고 너비를 계산할 수 없기 때문에 작동하지 않습니다. CSS에서 각 chzn 구성 요소의 너비를 임의로 설정하여 해킹해야 합니다. 이것은 이것이 작동하는 방식처럼 보이지 않으며 실제로 내가 본 웹 사이트에서와 같이 정상적으로 보이지도 않습니다.

나는 또한이 문제에 부딪쳤다. 결과적으로, 요소의 너비를 얻기 위해 선택한 방법은 이전 버전의 jquery에서 깨졌습니다(죄송하지만 정확한 버전 번호가 없습니다). 위에서 언급했듯이 버그는 요소가 보이지 않을 때 너비가 0을 반환하는 것이었습니다. 이 버그는 매우 잘 문서화되어 있으며 주변에 여러 가지 방법이 있습니다.

우리를 위한 해결책은 단순히 최신 버전의 Jquery로 업그레이드하는 것이었습니다. 예, 우리는 jquery를 사용하는 이전 코드의 일부 패치 및 테스트를 수행해야 했지만 장기적으로 많은 문제를 수정하고 js/css 전체에서 약간의 해킹 필요성을 줄입니다.

rails jquery gem 및 jquery-ujs에 패키지된 최신 jquery를 설치 중입니다. 아직 너무 오래된 것 같은데요?

예, 실제 버전 번호가 있으면 좋을 것입니다. 나는 1.6.2가
너무 오래되었습니다.

2011년 11월 16일 수요일 11:23, Kevin Elliott <
답장@reply.github.com

썼다:

rails jquery gem에 패키지된 최신 jquery를 설치 중입니다.
및 jquery-ujs. 아직 너무 오래된 것 같은데요?

@RoyJacobs newest 현재 출시된 1.7입니다.

@RoyJacobs 문제 없이 1.6.4를 사용하고 있음을 확인할 수 있습니다.

이건 이상해. 예, jquery-rails gem은 jQuery 1.7을 사용하고 있습니다. 그러나 그것은 여전히 ​​나를 위해 작동하지 않습니다.

너비로 렌더링되지 않는 것을 볼 수 있습니다. 검사 결과 계산된 모든 너비가 0px로 표시됩니다. 이것은 .chzn-select를 CSS의 너비로 설정하거나 select 태그의 스타일 매개변수에서 직접 설정한 경우에도 발생합니다.

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

확실히 짜증난다. 선택은 display:none (선택한 자바스크립트에서 가정)을 얻는 것으로 보이며 너비를 제대로 계산할 수 없다고 상상할 수 있습니다.

생각?

나는 이것이 어떤 상황에서도 작동하도록 할 수 있기를 정말로 바랍니다(강제로 해야 하는 경우에도). 아무것도 작동하지 않는 것 같습니다. 나는 이것을 완전히 포기해야 할 것입니다.

선택 항목에 일부 CSS, 스타일시트 또는 인라인이 적용되었는지 확인하십시오. 스타일시트로 하는 경우에는 selected()를 호출하기 전에 DOM에 요소를 삽입해야 합니다.

그러나 이 권리를 얻는 것이 매우 어렵다는 데 동의합니다. CSS를 통해 선택한 선택 영역에 너비를 적용할 수 있기를 정말로 원합니다. 하나의 클래스, 하나의 너비, px 또는 %.
내 CSS는 다음과 같습니다.

.example 선택, .example .chzn-smth {
너비: 50%;
}

그리고 이것은 어떻게, 언제, 어디에서 선택했는지에 관계없이 너비를 올바르게 적용합니다.

나는 인라인과 스타일시트를 통해 동작을 변경하지 않고 시도했습니다.

라이트박스와 아코디언에 대한 꽤 실질적인 문제입니다. 패치 작업하시는 분 계신가요?

아무도 아닌 것 같아요! 나는 이것이 누군가에게 어떻게 사용될 수 있는지 이해하지 못하기 때문에 충격을 받았습니다. 내 콘텐츠를 인위적으로 숨기지도 않습니다. selected() 호출이 수행하는 것 같습니다. 너무 이상해.

@kevinelliott 이 문제가 요소의 너비가 224px이고 'display: none;'을 설정합니다. 스타일 시트가 아닌 요소에 직접.

이것이 당신에게 도움이 되기를 바랍니다. 그리고 당신이 그것을 작동시킬 수 있기를 바랍니다.

고마워 리처드. jQuery를 업그레이드했는데 도움이 되지 않았습니다. 이상한 점은 내가 선택 요소를 숨기지 않는다는 것입니다. 선택된 사람이 그것을 숨기고 있습니다. 그래서 무슨 일이 일어나고 있는지조차 확신하지 못합니다.

@kevinelliott Np. 너비를 설정하고 있는지 궁금합니다.전혀 요소? 그렇다면 백분율 또는 픽셀을 사용하고 있습니까?

그래요. 픽셀로 설정하겠습니다. 스타일 속성을 사용하여 요소에 직접 설정하려고 시도했으며 CSS에서도 시도했습니다.

@kevinelliott 솔직히 말해서 조금 (우리는 이 작업을 수행하고 잘 작동함) 2) 선택한 라이브러리를 단계별로 실행하여 선택한 지점에서 선택 요소를 숨기고 있는지 확인하는 것입니다... 우리가 문제에 부딪쳤을 때도 이 작업을 수행해야 했습니다.

더 많은 도움을 드리지 못해 죄송합니다.

고정 너비가 선택되어 있어도 너비가 0px인 경우가 있습니다.
이유를 알 수 없고, 이 상황에서 작동하지 않고, 다른 곳에서는 작동하지 않습니다...

@tiagobrito : 나는 똑같은 문제가 있고 그것을

@RichardBlair 도와주셔서 감사합니다. 다른 생각이 있으시면 저희에게 알려주세요 :)

+
같은 문제인데 고쳐주세요

@tiagobrito , @dhampik 문제를 보여주는 작은 요점을

@bewest 나는 이미 알아 냈어! 내 프로젝트에서 jquery 1.4.x를 사용할 때 추가됩니다.
다음 주 월요일 너비: 0px를 유발하는 올바른 버전의 jquery를 알려 드리겠습니다.

@bewest 저도 확인합니다.
jquery의 이전 버전(1.6.4 이전)
처음에 숨겨져 있는 선택 레이아웃을 엉망으로 만듭니다.
다음은 2개의 바이올린입니다.
엉망 레이아웃(이전 jquery): http://jsfiddle.net/dhampik/2E9fG/
올바른 레이아웃(새 jquery): http://jsfiddle.net/dhampik/Rs9Z3/

맙소사, jquery의 버전이 Yii 프레임워크의 새로운 다가오는 버전으로 업데이트되었습니다)

Chosen을 Trac에 통합하려고 할 때 이 문제가 있습니다. 티켓의 속성 양식에 있는 초기 선택 상자의 너비는 0입니다. 속성은 기본적으로 숨겨져 있으며 링크를 클릭하여 확장할 수 있습니다. 제이쿼리 v1.7.1

업데이트: 적어도 Foliotek 블로그 게시물에 언급된 CSS 트릭이 jQuery 1.7.1에서 작동하지 않았기 때문에 문제를 해결했습니다. 나는 아직 JS 접근 방식을 시도하지 않았습니다.

내 해결 방법(Trac의 경우):

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

jQuery <= 1.7.1을 사용하는 사람들을 위해

jQuery Actual을 사용하여 이 문제를 해결했습니다.
다음에서 selected.jquery.js#301 변경
this.f_width = this.form_field_jq.outerWidth();
에게
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//1.7.2 주석에 대한 thx

@midday jquery.actual 의 README에 따르면 이것은 1.7.2 이전의 jQuery 버전에만 필요합니다.

이전 버전의 jQuery(>=1.7.1)는 보이지 않는 DOM 요소의 너비/높이를 찾는 데 문제가 있습니다.

@midday 실제 플러그인을 구현한 후 선택한 문제를

이 문제가 계속 발생합니다. 해결 방법에 대한 아이디어가 있습니까?

여기에서도 여전히 문제가 있습니다. 이것이 몇 년 동안 계속되고 있다는 것이 믿기지 않습니다...

나는 또한이 문제에 부딪쳤다. 도움이 되었으면 합니다.

이 CSS 트릭이 작동하는 것 같습니다.

/* 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. 그것은 나를 위해 문제를 해결했습니다. 감사합니다.

FWIW .chzn-container, .chzn-drop 및 .chzn-search 입력에서 최소 너비(!important 없이도)를 설정하면 초기에 숨겨진 선택에서도 작동한다는 것을 알았습니다.

내 해결 방법

CSS:

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

HTML:

선택 요소에서 너비를 설정하는 대신 원래 선택 요소에 래퍼 div를 추가하고 래퍼의 너비를 설정하도록 선택합니다.

Chosen은 이제 계산 시도를 무시하는 설정된 너비로 초기화하는 옵션을 제공합니다. 이것은 아마도 초기화 지점에서 선택이 숨겨져 있는 대부분의 사용 사례에 대한 만족스러운 해결 방법일 것입니다.

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

이 해결 방법은 아마도 이 버그를 수정하기 위해 수행할 작업이라고 생각합니다. 더 많은 복잡성을 추가할 수 있으므로 측정하기 위해 선택을 화면 밖으로 이동하는 코드를 포함하는 것을 정말 피하고 싶습니다.

이 솔루션을 기반으로 이 버그를 닫는 데 문제가 있는 사람이 있습니까?

나는 버전 0.9.8을 사용하고 있었고 숨겨진 선택이 정상적으로 작동했습니다. 오늘 나는 0.9.14 업데이트를 업데이트했고 작동을 멈췄습니다. 나는 축소 버전을 사용하고 있었다. 일반 버전으로 변경하면 모든 것이 다시 잘 작동합니다(chosen.jquery.js 0.9.14). 정상인가요? 축소 과정의 오류입니까?

jQuery min 또는 전체 크기 0.9.14에서는 숨김이 작동하지 않습니다.

새로운 옵션 '너비'가 저에게 효과적이었습니다. 적어도 이전에 숨겨져 있던 새로 선택한 입력에 대해서는 작업하십시오.

@trisweb 이것은 오픈 소스 프로젝트이며 여기에 적대감을 나타내지 않습니다. 오늘날의 Chosen을 만들기 위해 많은 시간과 에너지를 쏟은 많은 사람들이 있습니다. 프로젝트 개선에 기여하거나 댓글을 삼가해 주시기 바랍니다. 감사 해요.

@kenearley 저는 오픈 소스 에티켓을 충분히 알고 있으며 제 의견을 더 효과적으로 디자인했어야 했습니다. 미안합니다.

그렇긴 하지만, 나는 때때로 당신이 모든 소음에 대해 소리칠 누군가가 필요하다고 생각합니다.

선택한 요소의 너비에 대한 값이 0인 것은 논리적이지 않으며 올바른 너비를 결정하는 신뢰할 수 있는 방법을 고안해야 한다고 제안합니다. 그렇지 않으면 합리적인 기본값을 사용해야 하며 자명한 여러 가지 이유로 0은 합리적인 기본값이 아닙니다.

어려운 문제일 수 있습니다. 그래서 이 버그가 오랫동안 존재해 왔지만 몇 가지 해결책이 있다고 확신합니다. 개인적으로 나는 새로운 'width' 속성이 문제를 해결한다고 생각하지 않습니다. 왜냐하면 이것은 여전히 ​​관례보다 구성에 의존하기 때문에 기본 경우에 작동하지 않는 0 너비가 선택될 수 있기 때문입니다.

그렇긴 하지만, 나는 때때로 당신이 모든 소음에 대해 소리칠 누군가가 필요하다고 생각합니다.

아니요. '소음 때문에 소리칠' 필요는 없습니다. 누군가가 코드를 작성하는 방법에 대해 충분히 강하게 느끼는 경우 풀 요청을 제공하거나 리포지토리를 분기하고 원하는 대로 변경할 수 있습니다.

즉, 귀하의 후속 조치에 감사드리며 현재 솔루션이 이상적이지 않다는 데 동의합니다. 앞으로 나아가면서 더 나은 솔루션을 모색할 것이며 이 변경에 관심이 있는 모든 사람의 pull 요청에 크게 감사할 것입니다.

@kenearley 나는 수사학에 대한 당신의 의견에 정중하게 동의하지 않습니다. 그러나 물론 코드는 항상 말보다 더 크게 말합니다. 이것은 현재 우리에게 짜증나는 문제이므로 좋은 해결책을 찾으면 pull 요청이 올 수 있습니다.

:+1: 수정을 위해!

저는 Chosen을 거의 2년 동안 지켜보았지만 여전히 가장 우아한 선택 UI 개선 사항입니다. 그러나 이 숨겨진 문제는 여전히 주요 거래 차단기이며 100% 너비는 해결책이 아닙니다.
이 문제를 해결하려면 +1하세요. 고 팀 선택!

수정을 위해 +1

호출자가 프로그래밍 방식으로 너비를 설정할 수 있도록 하는 공식 해결 방법 외에도 다음 스레드를 기반으로 하는 적절한 해결 방법을 제안합니다.

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

해결 방법은 기본적으로 다음 기능에 의존합니다.

// 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;
};

그런 다음 Wich는 jquery.chosen 코드의 다음 모드(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";
    }
};

이에 대한 자세한 내용은 #795를 참조하십시오.

빠른 수정. select 를 숨기는 대신 $(elem).chosen(options) 를 수행한 다음 $(elem).hide() 즉, 먼저 선택한 요소를 만든 다음 숨깁니다. 이렇게 하면 원래 width 가 유지됩니다.

이거 아직 안 고쳐졌는데 오픈 3년차?

이 수정 사항에 대해 +1

버전 0.9.8에는 이 버그가 없었습니다! 너비를 얻기 위해 jquery outerWidth를 호출하는 데 사용했지만 이제는 HTML offsetWidth를 사용하여 0이 됩니다...

나는 그가 그것이 유망한 회귀라는 것을 의미한다고 믿습니다. 거기 있었어?
jQuery 메서드에서 전환하는 이유는 무엇입니까?

@pfiller jQuery 1.10.2를 사용하여 이 문제가 발생했고 귀하의 $("select").chosen({ width: '50%' }); 솔루션이 저에게 효과적이었습니다. 이것은 내 사용 사례에 대해 실행 가능한 해결 방법입니다.

전체 코드 아래에서 오프셋 너비를 얻기 위해 $(this.form_field).outerWidth() 를 사용합니다.

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

+1 이 수정이 정말 필요합니다. 기본적으로 양식을 숨기고 있으며 사용자가 이를 표시하려면 버튼을 클릭해야 합니다. 숨겨져 있기 때문에 내 선택의 너비를 올바르게 설정하지 않습니다.

@henesnarfel - @pfiller 가 여기에 게시한 해결 방법을 사용하려고 할 수 있습니다. https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

범프, 문제는 여전히 있습니다. 이를 위한 내장 솔루션이 있어야 합니다. +1하겠습니다.

내가 생각할 수 있는 유일한 해결 방법은 container_width 함수에서 다음 코드를 반환하는 455행(적어도 내 편집기에서는)으로 가는 것입니다.

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

그리고 그것을 대체

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

문제가 사라졌습니다.

@ayyash 는 문제를 완전히 수정하지 않습니다. 너비 0보다 낫습니다.

나를 위해 이것은 트릭을 수행했습니다 (즐거움을 위해 자신의 크기를 채우십시오).

/* 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; }

감사 해요

@Thinklabsnk 감사합니다, 훌륭하고 빠른 수정.

편집: 이것은 모든 선택 요소의 너비가 동일한 경우에만 작동합니다.

다음은 다른 제안 사항을 기반으로 한 해결 방법입니다. 너비를 측정하기 위해 숨겨진 입력을 복제하고 본문에 추가하지만 추가하기 전에 클론의 가시성을 숨김으로 설정하여 화면에 표시되지 않도록 합니다.

selected.jquery.js에서 다음 코드 줄을 찾습니다(내 버전의 455줄).

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

다음으로 교체하십시오.

        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";

도움이 되기를 바랍니다.

@danjjohnson 감사합니다.

유일한 것은 내가 변경해야한다는 것입니다.

clone.offsetWidth; 

에게

clone.outerWidth();

어떤 이유로 clone.offsetWidth가 정의되지 않은 값을 제공했습니다.

친애하는,

이 버그는 Firefox에서 발생하며 Chrome 또는 기타 환경에서 테스트하지 마십시오.

첫 번째 이미지(상단)
스크롤바가 있고 없는 경우 선택한 설정 너비입니다. 잘못된 결과입니다.

두 번째 이미지(가운데)
첫 번째 이미지처럼 스크롤바가 있어서 너비를 설정했는데 이번에는 스크롤바가 제대로 생겼습니다.

세 번째 이미지(하단)
이것이 스크롤 막대가 없는 첫 번째 이미지가 되어야 하는 방식입니다. 이 테스트는 선택한 너비를 width: 100% !important

:thumbsup: @johnmerced 의 수정으로 @danjjohnson 의 수정

간단하고 작동하는 또 다른 수정 사항이 있습니다. 요점은 너비가 0이 되지 않도록 합니다.

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

어이,
이 문제에 대한 내 솔루션은 지금까지 게시된 솔루션(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";
                }
            }
        }
    };

숨겨진 선택 항목에 대해 정적 CSS 너비(px)를 정의하기만 하면 됩니다.

전반적인 수정이 여전히 필요합니다.

여기서 문제는 창의 크기를 변경하면 선택 항목이 항상 초기화된 것과 동일한 크기로 표시된다는 것입니다. 더 나은 솔루션은 숨겨져있을 때 초기화에 필요한 너비를 추측하는 것보다 표시되거나 창의 크기가 조정될 때 선택의 크기를 조정하는 것이라고 생각합니다.

선택한 개체의 크기를 동적으로 변경하는 방법은 없나요? 크기(resize event 또는 onShow 또는 이와 유사한 것)를 변경할 때를 알고 있기 때문에 해결 방법이 될 수 있습니다. 선택한 객체의 크기를 변경하는 API 함수가 있습니까? 아니면 어떻게 든 다시 초기화?

:+1: 수정을 위해. 오늘 이것에 부딪쳤다.

:+1: 이것을 추적하는 데 너무 많은 시간을 _way_ 낭비했습니다.

여전히 모달의 크기에 문제가 있습니다. 4.0 릴리스에서 수정할 계획이 있습니까?

@danjjohnson 첫 번째 요소가 다른 요소보다 훨씬 작을 때 수정으로 문제가 해결되지 않습니다.

@danjjohnson 을 기반으로

마구 자르기

라인 찾기

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

로 대체

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";

$('선택').chosen({폭: '100%'}); @pfiller 가 접을 수 있는 패널에서 저를 위해 일했습니다.

감사 해요

내 프로젝트 디렉토리에 자산을 로드할 수 없기 때문에 어떻게 선택된 검색 클래스를 제거할 수 있습니까?

아직 렌더링되지 않은 템플릿에서 정적 선택을 로드할 때 시간 초과를 추가해야 했습니다. 초기화를 시도할 때 계층 구조에 메트릭이 없었습니다. 0 시간 초과로 래핑하면 이벤트 대기열의 끝까지 초기화가 충돌합니다.

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

방금 이 버그에 걸렸습니다. 100% 문제가 해결되었습니다.

@harvesthq 이 문제를 해결하는 풀 리퀘스트를 수락하시겠습니까? 아직 최선의 솔루션이 무엇인지 확실하지 않지만 기꺼이 수정하고 풀 리퀘스트를 할 것입니다 :heart:

이에 대한 강력한 해결 방법은 ng-show 대신 ng-if를 사용하는 것입니다. 완벽하게 작동하고 간단합니다.

나는 많은 상황에서 ng-if가 선호되는 선택이라는 것을 알아냈습니다. 손상된 ng-select를 복구할 뿐만 아니라 재귀 컨트롤러를 허용합니다(ng-if, ng-controller, ng-init 및 ng-template의 조합 사용).

그래서 이 4년된 문제가 아직 해결되지 않은 것 같습니다?!?!

+1

그 사이에 +1... 나는 select2를 사용하고 있습니다

선택한 선택 목록을 클릭하면 영역에 스피너가 확장되도록 하는 방법이 있습니까? 선택한 jquery에 데이터가 추가되는 동안 발생해야 합니다. 선택한 jquery로 엄청난 수의 레코드를 처리하고 있으며 처리하고 표시하는 데 시간이 걸립니다. ??

얼마나 장엄한 5 년 버그 ... 여전히 사람들을 물고 있습니다 (아야!).

Google에는 숨겨진 div에 제대로 표시되지 않는 유사한 버그가 지도에 있습니다. 그러나 이러한 두 가지 문제에는 구현하기 쉬운 해결 방법이 있습니다.

예, 작년 IIRC에 Google 지도 버그를 발견했습니다. 하지만 이 보고서를 찾기 전에 얼마나 많은 사람들이 반나절을 욕하고 다양한 시도를 하며 보냈습니까? 인기 있는 라이브러리에 있는 이와 같은 버그는 시간을 낭비합니다. 매년 이 라이브러리 중 하나를 배우는 사람들의 수를 곱하면 총 비용은 아마도 어마어마할 것입니다... 그들이 고칠 생각이 없다면 괜찮습니다. 이 시점에서 수정하면 아마도 배포된 수많은 해결 방법과 이상하게 상호 작용할 수 있습니다. 이 경우 그들은 수정하지 않고 있음을 인정하고 문서에서 눈에 띄는 곳에 해결 방법을 문서화하여 사람들이 만드는 데 어려움을 겪지 않도록(또는 미스) 이 물건에 대한 마감일.

내 "전체" 수정은 다른 수정과 유사하며 마크업의 모든 선택 너비가 상위 div의 100%라고 가정합니다. 우리는 부트스트랩을 사용하므로 이것이 우리의 경우입니다.

페이지 로드 시 .chosen()을 초기화한 직후에 이 코드를 실행하십시오.

```
$(".chosen-container").each(함수(i, 요소) {
if ($(elem).width() == 0) {
$(elem).width("100%");
}
});
````

요소가 처음에 CSS 숨겨진 컨테이너 안에 있었다가 표시될 때 너비가 0px인 경우 문제가 있는 분들에게 - 내가 찾은 수정 사항은 js 구성에서 너비를 설정하는 것이었습니다.

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

그런 다음 선택 입력에 CSS 클래스 selected-select-width를 제공했습니다.

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

선택한 v1.6.2 및 jquery 버전 3.1.1로 트릭을 수행하는 것 같습니다.

기본적으로 선택된 너비 옵션(자동)을 그대로 두고 다음을 추가합니다.

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

내 사이트의 CSS에 추가합니다(필요에 따라 최소 너비 조정). 이렇게 하면 가능한 경우 선택의 이상적인 너비에 맞추면서 0px(또는 사용하기에 너무 작음)가 되지 않습니다(선택 요소가 다른 콘텐츠와 인라인으로 있을 때 100% 너비 또는 그 효과를 강제로 적용하는 것은 잘 작동하지 않습니다. 이 방법은 핵심 문제를 해결하고 인라인 선택 요소를 허용하고 가장 간단하고 직접적인 구현을 제공하는 것처럼 보입니다.

7년이 지난 지금도 이게 어떻게 깨지지?

부트스트랩 3을 사용하는 작업은 다음 스타일을 추가합니다.

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

부트스트랩 3을 사용하는 작업은 다음 스타일을 추가합니다.

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

구매해도 드롭다운이 표시되지 않습니다.... @koenvanderlinden

그것은 이미 문서화되어 있습니다
https://harvesthq.github.io/chosen/options.html
width 옵션 및 설명 확인

@qbadev 이렇게 하면 요소가 필요할 때 내용에 맞게 크기가 조정되지 않으므로 실제로 수정 사항으로 보지 않습니다(특히 min-width를 사용하는 경우 이보다 더 나은 결과를 제공할 때).

문서의 설명은 버그(해결 가능해야 함)를 효과적으로 호출하고 버그에 대한 잠재적인 해결 방법으로 이를 사용하는 것을 언급합니다.

@koenvanderlinden 은 min-width:90%; 권장하므로 일반적으로 90% 너비이고 선택 항목의 내용에 필요한 경우 최대 100% 너비입니다. 그런 다음 다시 min-width:5em; (정확한 em 값은 사용 사례에 따라 다름)를 선택하므로 결코 작지 않지만 부모를 기반으로 크기 조정하기보다는 선택의 내용에 맞게 확장하려고 시도합니다. 요소.

@KZeni 나는 그것이 수정이라고 말하지 않았습니다. 그것은 단지 문서화되어 있습니다. 그리고 그것은 좋은 해결책입니다. 내 주요 문제는 Chosen이 초기화 후 너비가 거의 0이라는 것입니다. 이제 "수정" 후 선택한 항목을 볼 수 있고 상위 요소에 적용된 CSS 클래스를 사용하여 원하는 대로 수행할 수 있습니다.

나는 객체가 0 너비이기 때문에 계산할 수 없는 이러한 문제에 여러 번 직면했습니다. 응용 프로그램마다 다르기 때문에 보편적으로 해결할 수는 없습니다.
따라서 초기화하는 순간에 선택 항목이 표시되면 조치가 필요하지 않지만 숨겨져 있으면 width 옵션을 사용하는 방법입니다.

사용자 정의 너비 지원
Chosen과 함께 사용자 정의 너비를 사용하는 것은 Chosen을 만들 때 옵션을 전달하는 것만큼 쉽습니다.
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

jQuery를 1.*에서 3.* 릴리스로 업그레이드한 후 이 문제를 발견했습니다.
해결:

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