chosen 🚀 - 선택된 것은 "overflow:hidden"이 있는 영역에 배치될 때 "잘라냄"을 받습니다.

이것은 59번 문제와 동일합니다.

reconbot 에 2011년 07월 27일

이것은 컨테이너 요소부터 피할 수 없는 것이지 않습니까? "overflow :hidden"이 CSS가 작동하는 방식입니다. 이 문제를 해결하는 유일한 방법은 드롭다운을 컨테이너 외부로 렌더링한 다음 절대 위치 지정을 사용하는 것입니다.

dfischer 에 2011년 07월 28일

예, dfischer에 동의합니다. 선택된 문제가 아닌 것 같습니다. 정의에 따라 overflow 속성은 콘텐츠가 요소의 경계를 넘으면 어떻게 되는지 지정합니다. _overflow_를 숨기지 않으려면 해당 속성을 변경하십시오.

johnnyfreeman 에 2011년 07월 28일

👍1

사실이지만 이것이 대화 상자의 일반적인 사용 사례라고 생각합니다. (특히 jquery 대화 상자)

reconbot 에 2011년 07월 28일

👍1

이것은 일반적인 사용 사례이지만 앞서 언급한 것처럼 이 티켓을 기반으로 합니다. 이를 수행하려면 전체 구조와 구현을 변경해야 합니다.

이를 위해 컨테이너 외부에서 렌더링한 다음 jQuery/JS 매직을 사용하여 트리거에 상대적인 위치를 파악해야 _필요_합니다.

jQuery Dialog의 경우는 컨테이너 요소에 의존하지 않으므로 대화 상자의 중심 치수와 너비를 기준으로 위치 지정만 사용합니다.

dfischer 에 2011년 07월 28일

이것은 선택된 문제가 아니라 CSS 문제입니다. overflow:hidden을 컨테이너에 넣지 마십시오. 그것이 당신이하고있는 일이라면 그 아래의 부유물을 지우려면 다른 기술을 사용해야 할 것입니다.

dfischer 에 2011년 07월 28일

👍2

나는 당신이 찾고있는 것을한다고 생각하는 몇 가지 코드를 작성했습니다.

$.fn.extend({
선택됨: 기능(데이터, 옵션) {
if ($(this).parent().css("overflow") == "hidden") {
// 부모와 자식 사이의 오프셋을 가져와 diff를 계산합니다.
//절대값으로 푸시할 때
var y = $(this).offset().top - $(this).parent().offset().top,
x = $(this).offset().left - $(this).parent().offset().left,
$t1 = $("<div/>", {
CSS: {
"위치": "상대적",
"높이": $(this).parent().height,
"너비": $(this).parent().width
}
}),
$t2 = $("<div/>", {
CSS: {
"위치": "절대",
"상단": y,
"왼쪽": x
}
});
$t1.insertBefore($(this).parent());
$(this).parent().appendTo($t1);
$t2.appendTo($t1);
$(this).appendTo($t2);
}
반환 $(this).each(함수(입력_필드) {
if (!($(this)).hasClass("chzn-done")) {
return new Chosen(this, data, options);
}
});
}
});

(btw 저는 오늘 현재 github에 익숙하지 않으므로 코드를 게시해야 하는 다른 장소가 있으면 알려주세요)

이 코드는 다음을 효과적으로 수행합니다.

선택 상자와 부모 사이의 오프셋을 계산합니다.
오버플로와 동일한 크기로 상위 div를 만들고 상대 항목으로 설정합니다.
1단계의 x 및 y 오프셋을 사용하여 요소를 절대 요소로 만드는 선택 상자의 부모를 만듭니다.
선택의 부모 앞에 새 부모를 삽입하고, 새 부모 안에 오버플로 div를 추가하고, 마스터 부모 안에 새 선택 부모를 추가하고, 새 자식 부모에 선택을 추가합니다.

medelbrock 에 2011년 07월 28일

흥미로운 아이디어 Matthew, 하지만 jQuery-UI 대화 상자에서는 작동하지 않을 것 같은데요?

드롭다운 요소(.chzn-drop)가 .chzn-container에서 문서 본문까지 당겨져야 할 가능성이 더 높습니다...

tompaton 에 2011년 07월 29일

페이지에 스타일을 추가하기만 하면 답은 '예'입니다.

.ui-dialog{ 오버플로:표시; }

medelbrock 에 2011년 07월 29일

👎37 👍1

div를 열로 사용하여 페이지를 생성하기 때문에 작동하지 않습니다(td 및 테이블과 반대).
나는 폭주하는 콘텐츠가 이웃 div를 망치는 것을 막기 위해 " overflow:hidden "을 사용합니다.

많은 분들이 같은 구조를 사용하고 계시리라 생각합니다.

ethaniel 에 2011년 07월 29일

대화 상자가 overflow:auto 로 설정되어 있으므로 작동하지 않습니다
필요한 경우 스크롤바가 있습니다.

2011년 7월 29일 금요일 오후 11:47 ethaniel
답장@reply.github.com
썼다:

div를 열로 사용하여 페이지를 생성하기 때문에 작동하지 않습니다(td 및 테이블과 반대).
나는 폭주하는 콘텐츠가 이웃 div를 망치는 것을 막기 위해 " overflow:hidden "을 사용합니다.
많은 분들이 같은 구조를 사용하고 계시리라 생각합니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

tompaton 에 2011년 07월 29일

이 대화를 더 진행하기 전에 제가 한 것은 이론적 수정입니다. 모든 시나리오에 적용할 수는 없습니다. 문제를 해결하는 반대 속성이 있는 요소 하나만 있으면 되기 때문입니다. 오버플로가 보이는 위의 솔루션은 resizable:false 대화 상자 옵션에서만 작동

medelbrock 에 2011년 07월 29일

자, 여기 문제를 명확히 해 줄 여러 스크린샷이 있습니다.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

스크린샷 1과 2는 작동 방식을 보여줍니다.
대화 상자 "내부"에 드롭다운이 표시되므로 스크롤되어 숨겨집니다.
결과. 이것은 사용하기가 매우 투박하고 추악하며 내장 된 방식이 아닙니다.
선택 컨트롤이 작동합니다(컨텐츠 상단에 표시됩니다.
내부에 얼마나 깊은지 또는 오버플로 스타일이 무엇인지).

스크린샷 3과 4는 현재 해결 방법을 보여줍니다.
드롭다운 아래의 공간 힙입니다. 이것도 못생겨서 형태를 만든다
사용하기 더 어렵습니다.

요약하자면 실제 요점은 기본 선택 컨트롤이
상위 컨테이너로 제한되며 가능한 경우 선택된
강화된 선택 제어도 해서는 안 됩니다.
네이티브 컨트롤에 대한 드롭인 교체.

tompaton 에 2011년 07월 29일

이것은 이론적으로 수행할 수 있지만 선택한 플러그인에 따라 완전히 다른 구성/포지셔닝 시스템이 필요합니다. 이 변경은 광범위하며 현재 플러그인을 약 30% 다시 작성해야 합니다. 나는 이것을 버그가 아니라 기능 요청이라고 생각합니다. 모든 브라우저에는 선택 요소에 대한 기본 렌더링이 있습니다.Chosen은 div를 사용하여 이를 복제하지만 선택 요소처럼 취급하지 않습니다.

medelbrock 에 2011년 07월 29일

내가 말했듯이 이것을 하는 유일한 방법은 트리거된 요소의 외부에 절대 위치를 지정하는 것입니다. 다른 방법은 없습니다. @medelbrock에서 수정

dfischer 에 2011년 07월 29일

브라우저 위젯처럼 작동하도록 선택하는 것이 매우 좋겠지만 이것이 버그가 아닌 기능으로 간주되어야 한다는 데 동의합니다. 현재 최대 높이를 설정할 수 있습니까?

reconbot 에 2011년 07월 30일

@veloper : (가능한 한) div.chzn-drop 이 여전히 대화 상자에 포함되어 있으므로 작동 방식을 알 수 없으므로 절대 위치 지정 여부에 관계없이 잘립니다.

그것을 막을 수 있는 유일한 방법은 div.chzn-drop 를 대화 상자에서 끌어내어 <body> 의 자식으로 만드는 것이지만 모두가 지적하듯이 이는 누구보다 큰 변화입니다. 기꺼이 그들의 손을 더럽히려고 합니다.

tompaton 에 2011년 08월 02일

불행히도 overflow:visible 를 사용하는 것은 옵션이 아니며 필요한 경우 대화 상자를 스크롤할 수 있어야 합니다.

tompaton 에 2011년 08월 05일

👍5

드롭다운 위치를 절대로 설정하고 드롭다운 설정을 표시할 때마다 위치를 설정하여 문제를 해결했다고 생각합니다.
예: 변경(자바스크립트 편집)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

NS

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

chris-herring 에 2011년 08월 15일

👍1

Wijmo/jQuery UI 대화 상자 내에서 Chosen이 작동하도록 하는 동안 이 문제가 발생했습니다. 여기에서 벗어날 수는 있지만 "드롭다운" 부분이 숨겨져 있는 동안 "디스플레이: 없음"이 표시되고 표시될 때 "디스플레이: 차단"이 되도록 하는 매우 간단한 수정이 있습니까? 드롭다운이 열려 있을 때 여전히 스크롤 막대가 발생하지만 스크롤 막대가 항상 표시되도록 하는 것보다 낫습니다.

Polemarchus 에 2011년 08월 19일

👍1

수정 사항(Chrome 13, Firefox 7 및 IE 9에서 테스트됨):

selected.css에서:

.chzn-container .chzn-drop {
위치: 고정;
}

그리고 Chosen.prototype.results_show에서

var 오프셋 = this.container.offset();
this.dropdown.css({
"상단": (offset.top+dd_top) + "px",
"왼쪽": offset.left + "px",
"디스플레이": "차단"
});

http://img30.imageshack.us/img30/4094/chosen3.png

levushka 에 2011년 09월 05일

좋은 생각이군요 @levushka. 내 지점에서 지금 해결됨: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

tompaton 에 2011년 09월 05일

좋아, 그것보다 조금 더 복잡하다. 페이지를 스크롤한 경우 위의 수정 사항이 작동하지 않았습니다.

일종의 수정 세트로 리포지토리를 업데이트했는데 이제 드롭다운이 올바르게 배치되었지만 드롭다운이 표시되는 동안 페이지를 스크롤하면 예상대로 이동하지 않습니다. 그것은 성가신 일이지만 쇼 스토퍼는 아닙니다.

tompaton 에 2011년 09월 06일

iOS 5는 이 문제를 _아마도_ 해결할 수 있지만 iOS는 현재 데스크톱 브라우저와 동일한 방식으로 position: fixed를 지원하지 않습니다. Chosen은 데스크톱에서 훌륭하게 작동하지만 잘못 설계된 모바일 브라우저에서는 사용이 제한될 수 있습니다...

여기서 Apple을 선택하는 것이 아니라 Android의 이전 버전도 position: fixed에 대한 지원이 부족합니다.

jokeyrhyme 에 2011년 09월 07일

jQuery 1.7(아직 릴리스되지 않았지만 릴리스 후보에 있음)부터 CSS Position Fixed 지원에 대한 내장 테스트가 있습니다.
http://bugs.jquery.com/ticket/6809

jQuery 1.7을 감지하고 그 결과를 사용하거나 코드를 복사하고 그렇지 않으면 별도의 결과를 얻을 가치가 있을 수 있습니다.

jokeyrhyme 에 2011년 10월 02일

본문 요소의 끝 위치에 대해 +1입니다.

jquery 위젯 "자동 완성"을 확인하십시오. 그 문제에 대한 꽤 좋은 해결책:

http://jqueryui.com/demos/autocomplete/

그건 그렇고 훌륭한 플러그인.

fluxsaas 에 2011년 11월 09일

나는 주로 웹킷 브라우저에서이 문제를 겪었습니다. IE는 선택과 함께 정신을 차리게 되므로 ie를 비활성화했습니다. jquery를 사용하여 브라우저가 웹킷인지 확인하고 내가 선택한 항목이 포함된 div의 오버플로를 다음과 같이 조정합니다.

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

여기서 이것은 선택된 항목을 포함하는 div입니다.

frostyoni 에 2011년 12월 08일

+1 @levushka 및 @tompaton 완벽하지는 않지만 충분히 좋습니다. 간신히 :)

JonoB 에 2012년 03월 07일

@levushka 솔루션은 훌륭하지만 전역적입니다. 그래서 window.top에서 아래로 스크롤하여 선택 항목을 클릭하면 잘못된 위치로 롤다운됩니다. 그래서 여기 일반 페이지 및 팝업 창에 대한 솔루션이 있습니다.

Chosen.prototype.results_show에서

바꾸다:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

와 함께:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS:

   .popup .chzn-container .chzn-drop { position:fixed; }

jQuery UI 또는 다른 것을 사용하는 경우 z-index에 문제가 있을 수 있으므로 선택한 z-index를 더 높은 값으로 설정합니다(jQuery UI는 1010+임).

이제 FF에서 작동하며 Chrome의 경우 다음이 필요합니다.

     .popup { overflow-x:visible; overflow-y:visible; }

연인 요소는 문제 없이 overlow:hidden 을 가질 수 있습니다.

Evandar276 에 2012년 03월 29일

본문에 드롭다운을 렌더링하고 Jquery UI의 위치 기능을 사용하여 상자를 배치하지 않는 이유는 무엇입니까? http://jqueryui.com/demos/position/. 이것은 많은 jquery ui 위젯에 사용되는 표준 방법입니다.

$( ".czn-drop" ).position({
$( "#container" ),
내: "왼쪽 상단",
at: "왼쪽 하단",
});

pohnean 에 2012년 04월 22일

끼어들어서 죄송합니다. jQueryUI 대화 상자에서 선택한 드롭다운을 표시하는 것과 동일한 문제가 있었습니다.
나는 오버플로로 일반적인 것을 시도했지만 이것은 내 다른 대화 상자를 엉망으로 만들고있었습니다.

대신 내가 한 것은 내 대화 상자를 고정 높이로 설정하고 선택한 드롭다운도 고정 높이로 설정하는 것이었습니다.
CSS 대신 선택한 옵션에서 이 작업을 수행할 수 있는 옵션이 있으면 좋을 것입니다.

.chzn-drop {
오버플로: 자동;
최대 높이: 75px;
}

어쩌면 이것은 다른 사람을 도울 수 있습니다.

noir2501 에 2012년 05월 03일

꽤 n00bish/RTFM 질문에 대한 변명입니다. 하지만 컨테이너 외부에서 드롭다운을 어떻게 렌더링할 수 있습니까(예: body )? 지금 당장 생각나는 것은 플러그인을 포크하고 해당 코드를 플러그인에 밀어넣는 것뿐입니다. 이를 달성하는 보다 우아한 방법이 있어야 합니다.

aL3xa 에 2012년 05월 06일

드롭다운이 열리거나 닫힐 때 선택한 이벤트가 발생합니까? 그렇다면 부모 div의 오버플로 설정을 표시로 변경한 다음 다시 변경할 수 있습니다. 나는 그것을 시도했다 :

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});

그리고 네, 효과가 있었습니다. 그러나 내가 추가했을 때 :

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

더 이상 작동하지 않았습니다. 양식에 선택한 컨트롤이 여러 개 있기 때문에 가정합니다. 열기/닫기 이벤트 안에 이 코드를 추가할 수 있다면 원하는 곳으로 이동할 수 있을 것입니다.

PilotBob 에 2012년 05월 08일

원래 선택 요소에서 전달된 liszt:showing_dropdown 및 liszt:hiding_dropdown 들을 수 있습니다.

stof 에 2012년 05월 08일

훌륭합니다 ... 그래서 이것은 내 문제를 해결했습니다.

$(".chzn-select").on(" liszt:showing_dropdown ", 함수() {
$(this).parents("div").css("overflow", "visible");
});
$(".chzn-select").on(" liszt:hiding_dropdown ", 함수() {
$(this).parents("div").css("오버플로", "");
});

물론 모든 레이아웃에서 작동하지 않을 수 있습니다.

감사합니다...밥

PilotBob 에 2012년 05월 08일

👍1

<body/> 의 드롭다운 자식을 만들기 위해 코드를 분기했습니다. 아직 충분히 테스트하지 않았지만 여기에서 완벽하게 작동합니다 -> https://github.com/gil/chosen

문제가 해결되었는지 확인할 수 있습니까, @tompaton? 위치를 수동으로 수정하려면 지금 스크롤을 감지해야 한다고 생각합니다.

gil 에 2012년 05월 15일

포크는 나를 위해 디스플레이 문제를 해결했으며 페이지 하단에서 제대로 작동하여 표시되는 높이를 합리적인 것으로 제한했습니다. 그러나 포크로 인해 다중 선택 기능이 작동하지 않았습니다.

geoffweatherall 에 2012년 05월 16일

@geoffweatherall 정말요? 멋진! :D 다중 선택의 문제에 대해 무엇이 작동을 멈췄습니까? example.jquery.html 파일을 시도해보고 작동하지 않는지 알려주시겠습니까? 저에게는 괜찮은 것 같습니다.

gil 에 2012년 05월 16일

예, 예제는 잘 작동합니다(FF 12).

단일 선택 예제는 숨겨진 오버플로를 사용하는 "패널"이 있는 상당히 평범한 html 페이지에 있습니다. 그러나 다중 선택 예제는 colorbox(http://www.jacklmoore.com/colorbox)를 사용하여 만든 "대화 상자"에 있습니다. 이유는 묻지 마십시오. 프로젝트는 내가 도착했을 때 그대로였습니다. 그것과 관련이 있을 것 같은데, 찾아봐야겠습니다.

geoffweatherall 에 2012년 05월 16일

포크는 색상 상자(http://www.jacklmoore.com/colorbox) 내에 중첩되지 않은 다중 선택을 포함하여 응용 프로그램의 여러 위치에서 잘림 문제를 수정합니다. 컬러박스 문제는 선택의 잘못이 아니라고 생각합니다. 훌륭한 포크 :-)

geoffweatherall 에 2012년 05월 16일

실제로 샘플 페이지(example.jquery.html)에 표시되는 포크에서 문제를 발견했습니다. 다중 선택 컨트롤의 경우 컨트롤을 클릭하여 옵션 목록을 연 다음 위쪽 화살표 및 아래쪽 화살표 키를 사용하여 목록을 탐색하면 옵션 목록이 페이지 상단으로 깜짝 이동합니다. 단일 선택에서는 이 문제가 발생하지 않습니다. FF12, Chrome 18 및 IE8에서 테스트되었습니다.

geoffweatherall 에 2012년 05월 16일

@geoffweatherall 아마도 선택됨 드롭다운을 통해 렌더링되고 있다는 것입니다. 다음과 같이 시도하여 도움이 되는지 확인합니다.

.chzn-drop {
    z-index: 999999 !important;
}

또는 색상 상자 불투명도를 0.1로 설정하여 색상 상자 아래에 드롭다운이 표시되는지 확인하십시오.

다른 문제는 키와 관련하여 몇 가지 해결책을 찾으려고 노력할 것입니다. 지금 작업하고 있는 프로젝트에서는 다중 선택을 사용하지 않았기 때문에 테스트를 거의 하지 않았습니다. 단일 선택 옵션에 더 중점을 둡니다.

gil 에 2012년 05월 16일

좋아, 나는 이것을 시도했고 드롭 다운을 볼 수 있었지만 위치가 잘못되었습니다. 텍스트 상자 아래로 꽤 많이 떨어지고 있습니다. 다음은 행동을 보여주는 징입니다. http://screencast.com/t/c4PCIHC176RX

PilotBob 에 2012년 05월 17일

안녕하세요 길님

나는 당신의 버전을 시도하고 작동합니다! 정말 감사합니다!
작동을 멈춘 작은 것이 하나 있습니다. 그것은 disable_search_threshold 옵션입니다. 검색 필드가 사라지지 않습니다.

당신은 어떤 생각이 있습니까?

감사!

pruimmartin 에 2012년 05월 26일

신경 쓰지 마요! 나는 그것을 스스로 고칠 수 있었지만 .. 아마도 코드에서도 그것을 변경해야 할 것입니다.

변화:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

NS

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

pruimmartin 에 2012년 05월 26일

이 포크의 상태는 무엇입니까? 마스터로 병합되었습니까? 아니면 아직 테스트 중인가요?

PilotBob 에 2012년 06월 06일

한 가지 다른 문제.. 포크가 작동하는 것 같지만 파이어폭스에서는 페이지 하단에 드롭다운 div가 표시됩니다. 음수 왼쪽 위치가 표시 영역 밖으로 이동하지 않는 것 같습니다. 아마도 그것은 내가 생각한 다른 스타일 때문일 것입니다. 어떤 아이디어라도? 디스플레이가 없음으로 설정되어 있지 않은 이유는 무엇입니까?

PilotBob 에 2012년 06월 06일

원래 수정 사항에 대해 오래 전에 풀 요청을 했지만
결코 받아 들여지지 않았습니다 (이유는 모릅니다).

이 스레드에서 제안된 추가 조정이 많이 있습니다.
그 이후로 나는 아직 그들 중 어느 것과도 플레이하지 않았고 확인하지도 않았습니다.
누군가가 그들을 통합하는 포크가 있는지 확인하기 위해(없는 경우
하나, 누군가가 하나를 만들어야 하고, 있다면 좋을 것입니다.
귀하의 질문에 대한 답변입니다.)

2012년 6월 7일 목요일 오전 6시 44분, Bob Archer
답장@reply.github.com
썼다:

한 가지 다른 문제.. 포크가 작동하는 것 같지만 파이어폭스에서는 페이지 하단에 드롭다운 div가 표시됩니다. 음수 왼쪽 위치가 표시 영역 밖으로 이동하지 않는 것 같습니다. 아마도 그것은 내가 생각한 다른 스타일 때문일 것입니다. 어떤 아이디어라도? 디스플레이가 없음으로 설정되어 있지 않은 이유는 무엇입니까?
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

tompaton 에 2012년 06월 07일

나는 그것들을 모두 시도했지만 그들 중 어느 것도 나를 위해 일하지 않았습니다. 왜냐하면 나는 숨겨진 여러 필드 세트와 스크롤되는 긴 양식을 가지고 있기 때문입니다. 따라서 내 솔루션은 드롭다운을 정적으로 만들고 처음에는 숨겨지고 열릴 때 표시되어 상위 컨테이너를 늘리는 것이 해결책이었습니다. 이것은 화면 맨 아래에 있더라도 내 모든 양식에서 작동합니다.

Chosen.prototype.results_show에서:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

Chosen.prototype.results_hide에서:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

selected.css에서:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

kaoskitn 에 2012년 06월 08일

@gil , 나는 당신의 포크에 감사드립니다. 이 버그 때문에 내 프로젝트에 Chosen 사용을 포기하려고 했습니다.

나는 수확하는 사람들이 부동 팝업을 제한된 컨테이너에 바인딩하는 데 내재된 결함을 보지 못한다는 사실에 솔직히 꽤 놀랐습니다. 오버플로 규칙에 관계없이 사람들이 위젯 주변에서 무엇을 하는지 모르는 공공 도서관에게는 좋은 생각이 아닙니다.

Twipped 에 2012년 06월 19일

얘들 아! 내 포크가 이 문제로 일부 사람들을 돕고 있다는 것을 알게 되어 기쁩니다... :)

그들이 코드를 변경할 계획인지 아니면 여기에 제안된 일부 솔루션과 병합할 계획인지 모르겠습니다. 이것이 모든 경우에 최상의 솔루션이라고 가정할 수 있는지 모르겠습니다. 테스트를 계속하고 모든 변경 사항이 포함된 pull 요청을 보내도록 합시다.

@geoffweatherall 키보드 문제에 도움이 될 것으로 생각되는 코드를 수정했습니다. 작동하는지 알려주세요! ;)

@PilotBob 그 징에서 여전히 문제가 있습니까? 다른 문제에 대해서는 Firefox 12에서 example.jquery.html 를 테스트했는데 괜찮은 것 같습니다. 찾을 수 있는 모든 left:-9000px 를 display:none 로 대체하려고 할 수 있습니다. 코드를 잘 알지 못하지만 display:block at results_show() 를 설정하고 있으므로 도움이 될 수 있습니다.

@pruimmartin 수정

gil 에 2012년 07월 02일

길 - 아니, 더 이상 일어나지 않는 것 같고, 나는 아무것도 바꾸지 않았다. 나는 그것을 일으킨 다른 곳에서 js 오류가있을 것으로 예상합니다. 그러나 나는 선택에 다른 문제가 있으며 다른 것으로 교체하는 것을 고려하고 있습니다. 이는 주로 마스터에서 수행되는 업데이트가 부족하기 때문입니다.

PilotBob 에 2012년 07월 02일

@PilotBob 이 프로젝트를 고려 중입니다: https://github.com/ivaynberg/select2
같은 오버플로 문제가 있지만 버전 3에서 변경할 계획이라고 생각합니다.

gil 에 2012년 07월 02일

@gil - 당신의 솔루션은 잘 작동하지만,의 폭 li.search-field 로 고정 숙박 25px . 즉, 예제 페이지를 로드하면 메뉴가 body 요소에 아름답게 추가되지만 자리 표시자 텍스트와 모든 입력은 25px 너비로 제한됩니다. 실제로는 search_field_scale 메서드가 전혀 없는 것처럼 보입니다. 내가 여기에서 뭔가를 놓치고 있습니까?

rreusser 에 2012년 07월 05일

@rreusser search_field_scale 메서드를 제거했습니다. 다중 선택과 위치를 올바르게 계산하기 위해서만 사용되었기 때문입니다. 이 포크에는 더 이상 필요하지 않았습니다. 어떤 브라우저/버전/OS를 테스트하고 있습니까? 나를 위해 검색 필드 크기는 example.jquery.html 에서 정확합니다.

gil 에 2012년 07월 05일

@rreusser 안녕하세요, 죄송합니다. 이제 무엇이 잘못되었는지 알았습니다. 오늘 나중에 수정하려고 합니다.

gil 에 2012년 07월 05일

문제없어, @gil! 신속한 답변 감사합니다! 좀 더 실험을 해야 하지만 임의의 요소에 첨부할 수 있도록 하는 것도 유용할 수 있습니다. 이 또한 아주 사소한 일일 것입니다. 스크롤하는 div 안에 선택 상자가 있고 솔루션이 클리핑을 방지하는 동안 메뉴는 스크롤할 때 div와 함께 이동하지 않습니다. 나는 필요한 모든 것이 어딘가에 하나의 추가 div라고 생각하지만 이것은 약간의 수정이 필요할 것입니다.

rreusser 에 2012년 07월 05일

@rreusser 해당 커밋을

그리고 다른 요소에 연결하는 방법에 대해 구성할 수 있도록 하는 것에 대해 생각하고 있었습니다. 그러나 약간의 구성으로 스크롤 문제를 해결할 수 있습니다. <select /> 가 스크롤링 div의 직계 자식이 아닌 경우 다음을 시도하십시오.

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

그러나 <select /> 의 부모 노드가 <div /> 경우 이것은 필요하지 않습니다.

gil 에 2012년 07월 06일

@gil , 이 포크가 마스터에 병합됩니까? 아니면 아직 테스트 중인가요? 또한 포크의 키보드 컨트롤에 문제가 있었습니다. 아래쪽 화살표 키가 results_show 또는 results_toggle 메서드를 실행하지 않습니다. 감사 :-)

myfriendtodd 에 2012년 08월 08일

@myfriendtodd 아직 잘 모르겠지만 모두가 안정적이라고 생각할 때 풀 리퀘스트를 보낼 수 있습니다. 그러나 아직 더 많은 테스트가 필요하다고 생각합니다. 이번 주말에 키보드 문제를 해결하려고 합니다. 감사!

gil 에 2012년 08월 25일

@myfriendtodd 헤이, 내가

gil 에 2012년 08월 27일

감사합니다 @gil 이 어떻게 되는지

myfriendtodd 에 2012년 08월 27일

@gil 포크 감사합니다. 수정 사항은 나를 위해 아름답게 작동했습니다. 굉장합니다!

그러나 나는 Kickstrap을 사용하여 Twitter Bootstrap에 맞게 Chosen 스타일을 지정하고 있습니다. 이로 인해 이 수정이 매우 심하게 손상된 Chosen이 발생합니다. 드롭다운의 내용은 페이지 하단에 스타일이 지정되지 않은 https://skitch.com/dyad/euys2/login 나타납니다. 내가 아는 한 Kickstrap은 기본 선택된 스타일을 덮어씁니다.

스타일 변경 사항에 대한 LESS 파일은 https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less 에서 찾을 수 있습니다. 일어날지도?

정말 감사합니다.

conatus 에 2012년 09월 12일

얘들 아,

본문에 드롭다운을 추가하는 대신 다른 접근 방식으로 새 버전을 작업하고 있습니다. 이 버전은 훨씬 깨끗하고 변경 사항이 크지 않기 때문에 많은 버그를 줄일 수 있습니다. 효과가 있는지 한번 해보시겠어요? 새 지점에 있습니다.

https://github.com/gil/chosen/tree/new_version

@conatus 이 버전으로도 시도해 주시겠습니까? "master" 분기의 마지막 버전은 CSS 파일에 많은 변경 사항이 있었고 이 버전은 3줄만 변경했습니다. Kickstrap의 선택된 CSS에서 다음을 변경하십시오.

4행, "위치: 상대"에서 변경 "위치: 정적;"으로.
"위치: 절대;"에서 13번째 줄 변경 "위치: 고정;"으로.
128행에서 "left: -9000px;" 아래에 새 행 "display: none;"을 삽입합니다.

이것이 효과가 있기를 바랍니다! ;)

gil 에 2012년 09월 14일

또한 이 새 버전은 Harvestq의 마스터 브랜치와 동기화됩니다!

gil 에 2012년 09월 14일

미안하지만 이전에 후속 조치를 취하지 않았지만 우리는 프로젝트의 다른 부분에 착수했고 이것은 매우 빠르게 멀어졌습니다! 테스트해보고 기회가 되는대로 알려드리겠습니다. 계속해서 노력해주셔서 감사합니다!

rreusser 에 2012년 09월 14일

@gil - 귀하의 버전을 테스트

이에 대한 2가지 가능한 해결책만 생각할 수 있습니다.
1) selected가 고정 위치 요소 내부에 배치된 경우 드롭다운은 chzn-container 내부에 배치되어야 하며 고정 위치도 제공되어야 합니다. 상단 위치는 컨테이너의 고정 위치로 계산되어야 합니다.
2) 스크롤하는 동안 드롭다운 위치 다시 계산

ragulka 에 2012년 09월 17일

세 번째 옵션은 선택 항목이 고정 위치 컨테이너에 있을 때마다 드롭다운을 고정시키는 것입니다.

Twipped 에 2012년 09월 17일

@ragulka @ChiperSoft 문제가 보입니다... 확인을 위해 이 jsfiddle이 여러분이 말하는 것을 재현하고 있습니까? http://jsfiddle.net/QY256/

나는 그것에 대해 뭔가를 하려고 합니다. div만 스크롤할 때 볼 수 있듯이 스크롤 문제를 처리하는 overflow_container 라는 새 옵션이 있습니다. 그러나 여기서 문제는 창을 스크롤할 때 위치가 잘못 지정된다는 것입니다.

스크롤을 처리하면 다른 사소한 문제(예 <select /> 가 절반만 표시되는 경우)가 발생하기 때문에 무언가가 스크롤될 때 Chosen을 닫는 것에 대해 생각하고 있었습니다.

gil 에 2012년 09월 18일

@ragulka @ChiperSoft 또한 임시 수정 사항으로 update_position 메서드 내에서 다음과 같이 640번 줄을 변경해 볼 수 있습니까?

"top": (offset.top + dd_top) + "px",

NS:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

gil 에 2012년 09월 18일

@gil 예 및 아니오 - 제공한 jsfiddle에 문제가 표시되지만 나에게는 본문을 스크롤할 때 나타납니다(내 고정 요소에는 스크롤 막대가 없음). 귀하의 jsfiddle에서 고정 요소의 내용을 스크롤할 때 문제가 나타나는 것처럼 보이지만 본문을 스크롤할 때는 그렇지 않습니다.

ragulka 에 2012년 09월 18일

@ragulka 그것이 최선의 해결책이 고쳤 습니다. 시도해 볼 수 있습니까? 내가 말했듯이 640행을 변경하고 다음과 같이 Chosen을 적용합니다.

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

이것은 div 및 document 에서 스크롤을 처리하고 위치를 수정해야 합니다.

하지만 내가 말했듯이, 나는 이것을 나중에 사용자가 스크롤할 때 Chosen이 숨기도록 변경할 것이라고 생각합니다.

gil 에 2012년 09월 18일

이것은 선택된 버그가 아닐 수도 있지만 선택에 대한 대체품으로 select2로 전환했으며 해결 방법을 수행할 필요 없이 문제가 해결되었습니다.

tetherit 에 2012년 09월 22일

감사합니다.

중간에 Kickstrap이 업데이트되었습니다 - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. 새 브랜치는 훌륭하게 작동하지만 Kickstrap CSS에 제안한 변경 사항은 효과가 없는 것 같습니다. 드롭다운 자체가 더 이상 나타나지 않습니다. 어떤 아이디어? 정말 감사합니다.

conatus 에 2012년 10월 02일

@gil님 감사합니다!!! 귀하의 지점(https://github.com/gil/chosen/tree/new_version)이 이 특정 문제에 대한 내 문제를 해결했습니다.

aruizca 에 2012년 11월 07일

모든 조언에 감사드립니다. Bootstrap v2.1.1 모달 및 Chosen v0.9.11에서 드롭다운이 작동하도록 하기 위해 위의 제안 사항을 약간 수정했습니다. 페이지가 스크롤된 후 다시 열렸을 때 .chzn-drop이 올바르게 위치하도록 하려면 약간의 변경이 필요했습니다.

이것이 다른 사람들을 돕기를 바랍니다.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

자바스크립트

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

robmcguinness 에 2012년 12월 22일

그래서 나는 Chosen 0.9.11로 조금 놀고 있었고 Chosen에서 수행해야 할 변경 사항을 확인했습니다...

드래그 가능하고 오버플로가 있는 최대 높이가 있는 크게 수정된 jQueryUI 대화 상자 내에서 Chosen을 사용하고 있습니다.

내가 원하는 것처럼 Chosen이 작동하도록 하려면 ".chzn-container .chzn-drop"을 " position:fixed "로 변경하고 " display:none "을 추가했습니다. 그런 다음 "Chosen.prototype.results_hide"에서 "this.dropdown.css"에 " display:none "을 추가했습니다...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

그리고 "Chosen.prototype.results_show"에서 "this.dropdown.css"의 내용을 " display:block "으로 바꿨습니다.
.chzn-drop div의 올바른 위치를 얻으려면 jQueryUI 위치 함수를 추가했습니다.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

"Chosen.prototype.search_field_scale" 변경에서...

return this.dropdown.css({
    "top": dd_top + "px"
});

... NS ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

이제 한 가지 문제만 남았습니다.

누군가가 대화 상자를 이동하기 시작할 때 선택한 드롭을 닫으려면 jQuery UI 대화 상자 드래그 이벤트를 수신 대기해야 합니다. 나는 이미 이것을 달성했지만 코드는 꽤 더럽습니다 :-)

milaan-muc 에 2013년 02월 04일

이 분기 https://github.com/gil/chosen/commits/new_version의 중요하지 않은 수정 사항이 GWTchosen으로 이식될 가능성이 있습니까?
GWTchosen은 굉장합니다. 그러나 현재 상태에서는 LayoutPanel과 함께 사용할 수 없습니다.

sillysachin 에 2013년 05월 21일

단순히 다른 클래스나 새 클래스를 추가하여 텍스트 필드 위에 목록이 렌더링되는 Chosen 라이브러리에 새 기능을 추가하는 것은 어떻습니까? 이 방법으로 스크립트는 래핑 overflow:hidden div 외부에서 목록을 렌더링할 필요가 없으며 아마도 다른 사람들이 가지고 있는 대부분의 문제를 해결할 것입니다. 추신: 나는 이것을 overflow:hidden 이 하고 있는 일을 정확히 수행하기 때문에 이것을 문제로 생각하지 않습니다. 기능이 있어서 더욱 좋습니다. 감사.

giulianoliker 에 2013년 07월 18일

+1 Klikerko의 제안에.

markgibbons25 에 2013년 07월 19일

@sillysachin과 마찬가지로 GWTchosen 을 사용하고 LayoutPanels, overflow:hidden 및 ChosenListBox에 동일한 문제가 있습니다./

누구든지 이것에 대한 수정 사항을 알고 있습니까? @sillysachin 여기에 게시한 이후로 뭔가 생각해 낸 것이 있습니까?

미리 Tnx:)

djgouze 에 2013년 07월 26일

우리는 부모 컨테이너에서 드롭다운 div를 가져와 임시로 패치했습니다. 불행히도 나는 릴리스에 휩쓸려 여기에 제출하기 전에 패치를 정리하는 데 시간이 걸릴 것입니다.

sillysachin 에 2013년 07월 28일

https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983의 이 커밋은 합리적으로 잘 수정합니다. 비교적 최신 버전이지만 jQuery용으로만 수행했습니다.

tompaton 에 2013년 08월 07일

@robmcguinness 작동하려면 일부를 수정해야 했습니다. 그러나 버그가 발생합니다. 드롭다운을 닫을 수 없는 경우.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

CSS에 너비를 추가해야 했습니다. 그렇지 않으면 사이트 너비가 100%가 됩니다.

.modal .chosen-container .chosen-drop {
위치: 고정;
너비: 300px;
}

timothymarois 에 2013년 11월 20일

위의 코드로 문제를 해결할 수 있었습니다. 버전 1과 호환됩니다. 그러나 내 것이 작동하기 위한 장비에 가깝습니다. 그러나 지금까지는 제대로 작동하고 있습니다. 내가 본 마지막 문제는 브라우저 크기를 조정하는 것인데 현재 모드가 작동하지 않습니다.

timothymarois 에 2013년 11월 20일

이 문제에 대한 가능한 수정 사항이 곧 마스터 브랜치에 병합될 것인지 아는 사람이 있습니까? 이것은 나를 위한 거래 차단기입니다 =/.

DanielHoffmann 에 2013년 12월 19일

우리는 Select2를 사용하기 시작했습니다... 더 많은 기능도 있습니다.

2013년 12월 19일 목요일 오전 11시 24분, Daniel Hoffmann Bernardes <
[email protected]>은 다음과 같이 썼습니다.

이 문제에 대한 가능한 수정 사항이 있는지 여부는 누구나 알고 있습니다.
곧 마스터 브랜치에 병합됩니까? 이것은 나를 위한 거래 차단기입니다 =/.
—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30942420에서 확인하세요.
.

PilotBob 에 2013년 12월 19일

PilotBob 감사합니다. 더 이상 유지 관리되지 않습니까? 그렇다면 문서를 업데이트할 수 있습니다.

DanielHoffmann 에 2013년 12월 19일

내 프로젝트가 아닙니다. 나는 그것의 사용자였다. 우리가 발견한 여러 문제로 인해
대안.

2013년 12월 19일 목요일 오전 11시 53분, Daniel Hoffmann Bernardes <
[email protected]>은 다음과 같이 썼습니다.

PilotBob 감사합니다. 더 이상 유지 관리되지 않습니까? 그렇다면 당신이 원할 수도 있습니다
문서를 업데이트합니다.
—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30945150에서 확인하세요.
.

PilotBob 에 2013년 12월 19일

@DanielHoffmann Chosen은 여전히 활발히 유지되고 있습니다. Select2는 원래 Chosen의 포크였지만 그 이후로 자신의 것이 될 정도로 멀어졌습니다.

Chosen은 의도적으로 단순하게 유지되었습니다. select 대한 드롭인 교체를 의도했기 때문에 복잡한 기능과 구성을 많이 피할 수 있습니다. Select2는 반대의 길을 택했고 많은 기능과 구성을 추가했습니다. 이러한 철학 중 어느 것을 더 가치 있게 여기는지는 귀하에게 달려 있습니다.

이 _특정_ 문제는 불행히도 문제일 뿐 수정이 아닙니다. 누군가가 이를 수정하기 위해 풀 요청을 제출하면 병합이 고려됩니다. 그러나 OSS는 메인테이너의 주요 업무가 아닙니다. 그들은 풀타임 업무를 할 수 있을 때 작업합니다. 따라서 항상 그렇듯이 직접 수정하려는 경우 "pull requests 허용"을 선택하십시오!

tjschuck 에 2013년 12월 19일

이 문제는 언제 수정되나요? 너무 오래되었지만 많은 프로젝트에 중요합니다! 최대한 빨리 처리해주세요!

감사 해요!

선택한 포크에 많은 수정 사항이 있으므로 이러한 수정 사항 중 하나를 사용하지 않는 이유는 무엇입니까?

ghost 에 2014년 04월 18일

@domnulnopcea 이에 대한 수정 사항을 제출한 PR은 없으며 보고서가 중복됩니다. 고칠 생각이 있으면 PR을 보내주세요. 그런 다음 검토하겠습니다. 현재 이 특정 문제를 해결하는 포크에 대해 알지 못합니다.

stof 에 2014년 04월 18일

나는 이것에 대한 수정 사항이 있습니다. 깨끗한 포크가 아니며 다른 저장소에 묻혀 있고 jQuery 버전에만 있습니다. (아니, 난 내 자신이 자랑스럽지 않아)

본문 요소에 드롭다운 요소를 추가하고 페이지를 스크롤하거나 크기를 조정할 때 위치를 절대적으로 설정하여 작동합니다. 또한 드롭다운이 필드 위 또는 아래에 있어야 하는지와 높이가 얼마나 되어야 하는지도 알 수 있습니다(그래서 페이지에서 잘리지 않도록).

이것이 병합에 관심이 있는 것이라면(그리고 실제로 다른 포크가 없는 경우) 먼지를 털어내고 풀 요청을 생성할 시간을 찾으려고 노력할 것입니다.

https://gist.github.com/msaspence/11032254

msaspence 에 2014년 04월 18일

@stof https://github.com/tompaton/chosen은 어떻습니까?

커밋: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

ghost 에 2014년 04월 18일

@domnulnopcea 이것은 선택된 자체 AFAIK에 포함하기 위해 제출된 적이 없습니다. 모든 작업을 조사하기 위해 모든 포크를 검색할 수는 없습니다. 우리는 자유 시간에 Chosen에 대해 작업하고 있으므로 많은 저장소에서 수천 개의 커밋을 검사하여 그들이 무엇을 하고 있는지 확인하는 데 몇 주를 할애할 수 없습니다.

stof 에 2014년 04월 18일

@stof 당신의 노고에 감사드립니다. 내 프로젝트(www.ubirimi.com)에서 사용합니다. 하지만 이제 커밋에 대한 링크를 제공했으므로 변경 사항을 살펴보고 선택한 공식 저장소에 적용해도 될까요?

정말 감사합니다

ghost 에 2014년 04월 18일

직접 적용할 수 없다는 점을 감안할 때(11개월 이후 코드가 많이 변경됨) 시간이 필요합니다(또한 제대로 작동하는지 테스트해야 함). 그래서 지금은 할 수 없다.

stof 에 2014년 04월 18일

@stof 생각

ghost 에 2014년 04월 18일

@domnulnopcea 가 중요하다면 변경 사항을 살펴보고 직접 pull 요청을 생성하지 않으

msaspence 에 2014년 04월 18일

@msaspence 하지만 저는 프론트엔드 개발자가 아닙니다! 나는 JS와 그 모든 클라이언트 측 물건에 익숙하지 않습니다.

ghost 에 2014년 04월 18일

AJAX 데이터 검색이 가능하기 때문에 Select2로 넘어갔습니다. 여러분은 그것을보고 싶어 할 것입니다.

PilotBob 에 2014년 04월 18일

이 단계에서 모두가 Select2로 이동했다고 생각합니다. Chosen을 사용하면 어떤 이점이 있습니까?

tetherit 에 2014년 04월 18일

나를 위해 PilotBob 솔루션이 완벽하게 작동했습니다!

내 코드에 이것을 추가했습니다.

$(문서).ready(함수() {
$(".chzn-select").on(" liszt:showing_dropdown ", 함수() {
$(this).parents("div").css("overflow", "visible");
});
}

매우 감사합니다!!!

antcascam 에 2014년 07월 09일

문제는 옵션 목록의 위치가 absolute 이고 상위 컨테이너를 확장하지 않는다는 것입니다. 내가 제안하는 솔루션은 float: left | right 로 DOM 개체를 추가한 후 부모를 확장할 수 있기 때문에 clear:both

baquiax 에 2014년 08월 01일

내 CSS에서 다음을 사용하여 이것을 (jquery-ui 대화 상자와 함께 사용) 해결했습니다.

#clone-budget-dialog {overflow: visible;}

grduggan 에 2014년 09월 06일

@grduggan 라이브러리의 CSS에서 솔루션을 제안할 수 있습니까?
나는 당신의 해결책이 유효하다고 생각합니다. 푸시 요청을 하세요!
+1

baquiax 에 2014년 09월 06일

전에 한 적이 없습니다. 조사를 해야겠다. CSS에 있으면 좋을 것입니다.

grduggan 에 2014년 09월 06일

선택 상자가 페이지 끝에 가까울 때 비슷한 문제가 나타납니다. 기본 선택 상자는 이 문제를 드롭다운 대신 여는 것으로 해결합니다. 왜 안 돼?

marcofognog 에 2014년 09월 22일

오버플로: 보이는; 컨테이너의 div에서 나를 위해 일했습니다! 감사.

clemich 에 2014년 12월 01일

float를 사용할 때 항상 overflow:hidden이 필요한 것은 아닙니다

&:전에,
&:후에 {
콘텐츠: " "; // 1
디스플레이: 테이블; // 2
}
&:후에 {
클리어: 둘 다;
}

이것이 부트 스트랩에서 clearfix 클래스가 작동하는 방식입니다.

dvera123 에 2015년 02월 17일

CSS를 수정했습니다(아래 참조). 내 시나리오에서 작동하는 것 같았습니다.

.chosen-container .chosen-drop {
위치: 상대; //컨테이너의 오버플로 차단을 피하기 위해 절대값에서 변경됨_/
상단: 100%;
왼쪽: -9999px;
z-인덱스: 1010;
너비: 100%;
테두리: 1px 솔리드 #aaa;
경계 상단: 0;
배경: #fff;
상자 그림자: 0px 4px 5px rgba(0,0,0,0.15);
}

.chosen-container .chosen-results {
색상: #444;
위치: 상대;
overflow-x: 숨김;
오버플로-y: 자동;
여백: 0 4px 4px 0;
패딩: 0 0 0 4px;
최대 높이: 200px; // 240픽셀에서 변경됨_/
-webkit-overflow-scrolling: 터치;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

chassq 에 2015년 03월 06일

fieldset 요소에서 select(및 Chosen)를 래핑하면 웹킷 브라우저에서 원치 않는 효과를 생성할 수도 있습니다(즉, 부모가 overflow: hidden 가질 때 잘라내기).
이는 webkit이 기본적으로 필드 세트에 min-width: -webkit-min-content; 를 추가하기 때문입니다.

이것은 나를 위해 문제를 해결했습니다.

fieldset { min-width: 0; }

sn3p 에 2015년 04월 16일

@chassq 흠 솔루션이 작동하지 않습니다. .. 이 스크린샷 참조:

나는 선택한 선택 주위에 div가 있습니다.

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

lpsBetty 에 2016년 04월 04일

이미 position: fixed 솔루션을 제공한 모든 분들께 감사드립니다.

다음은 솔루션이 포함된 jsfiddle입니다(선택한 CSS 클래스를 덮어씁니다).
http://jsfiddle.net/jwbL8utx/1/ ;)

아래로 스크롤하여(최대 높이 사용) 선택한 항목에 오프셋이 있는 경우 여전히 1가지 문제가 있습니다. 아래로 스크롤하여 두 번째 선택된 항목을 열 때 볼 수 있듯이 다음과 같습니다.

http://jsfiddle.net/jwbL8utx/2/

lpsBetty 에 2016년 04월 04일

👍2

이것이 내가 해결한 방법입니다.

http://jsfiddle.net/0w4a4dq5/1/

이 수정은 선택한 메뉴 자체 이외의 다른 요소를 변경할 필요가 없습니다. 마우스를 올리면 메뉴가 다시 숨겨지는 것을 알 수 있지만 이것은 내 요구 사항에 따른 것입니다. 항상 맨 위에 유지하려면 스크롤 이벤트를 div 컨테이너에 바인딩하고 ' selected:close.chosen ' 이벤트를 트리거할 수 있습니다.

typologist 에 2016년 06월 14일

👍5

@typologist 훌륭한 솔루션에 감사드립니다.
JS에는 두 가지 사소한 버그가 있지만 언급하고 싶습니다.
51행에는 다음과 같아야 합니다.

'top': y - $(document).scrollTop()

그렇지 않으면 특정 조건에서 팝업이 옮겨질 수 있습니다.

23행에서 사용하는 대신

$('.chosen-container')

이벤트를 바인딩하려면 다음을 사용하는 것이 좋습니다.

$chosenSelect.next('.chosen-container')

수정해야 할 다른 selected() 위젯으로 함수가 두 번 이상 호출되는 경우 다중 바인딩을 피하기 위해.

gradatz 에 2016년 06월 23일

👍1

Chosen v1.4.2에 대한 솔루션이 있는지 알려주십시오.

danhnguyeen 에 2016년 07월 15일

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

AgelxNash 에 2016년 11월 10일

👍10 ❤2

overflow-y: visible

레이아웃을 포함하는 상위 div에 이것을 추가하십시오. 제 경우에는 _overflow-y: auto_가 있고 이를 _overflow-y: visible_으로 대체하는 Modal 대화 상자 하위 div였습니다.

SaqibQhan 에 2016년 11월 18일

👍1

이 문제에 대한 해결책이 아직 있습니까?

rchaserr 에 2017년 06월 22일

이 프로젝트에는 다음과 같은 응답이 있습니다.
http://jsbin.com/finufihaji/edit?html

조금만 찾아보고 테스트해보는 것이 가장 기본적인 해결책입니다.

jSerenity 에 2017년 06월 27일

모든 옵션이 선택 가능하고 상위 div 오버플로 지시문에 영향을 받지 않도록 .chosen-drop 및 .chosen-results를 재정의하고 고정 높이를 둘 다로 설정해야 했습니다.

적어도 이것은 저에게 효과가 있으며 제가 선택한 대부분의 분야에는 3~4개의 옵션만 있습니다. 1(숨겨진 것)만 약 12를 가지며 가까운 장래에 성장할 수 있습니다.

CJX3M 에 2017년 07월 07일

오버플로가 있는 부모 div에 다음을 적용했습니다.

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

출처: 스택 오버플로

doowruc 에 2018년 08월 02일

👍2 🚀1 ❤1

@doowruc 대단한 해킹!

shlgug 에 2018년 09월 14일

선택한 드롭다운을 특정 대상에 연결하여 대화 상자 대신 문서 본문에 연결할 수 있는 방법이 있습니까? 이 방법을 선택하면 대화 상자에서 흘러나오고 대화 상자에 포함되지 않습니까?

mcarpenterjr 에 2019년 05월 20일

👍1

.ui-dialog-content{
    overflow:visible !important;
 }

나를 위해 일했다.

GitSahib 에 2019년 09월 04일

나는 여전히 이것으로 어려움을 겪고 있다는 것을 알고 있습니다. 다음은 요소를 본문으로 이동하고 스크롤하는 경우에도 안정적으로 절대 위치를 설정하는 옵션을 보여주는 Fiddle입니다.

https://jsfiddle.net/phil_ayres/gvn8bkaL/

philayres 에 2020년 02월 07일

👍2

https://github.com/R1p8p8e8r/chosen
내 솔루션이 도움이 될 것이라고 생각합니다.

R1p8p8e8r 에 2021년 07월 08일

Chosen: 선택된 것은 "overflow:hidden"이 있는 영역에 배치될 때 "잘라냄"을 받습니다.

가장 유용한 댓글

모든 128 댓글

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

CSS

자바스크립트

관련 문제

Chosen: 선택된 것은 "overflow:hidden"이 있는 영역에 배치될 때 "잘라냄"을 받습니다.

가장 유용한 댓글

모든 128 댓글

이 이메일에 직접 답장하거나 GitHub에서 확인하세요. https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

CSS

자바스크립트

관련 문제

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303