2017-04-11 4 views
1

고정 높이 컨테이너 내에 검도 UI MultiSelect가 있습니다 (모달 팝업을 생각하십시오). MultiSelect에는 autoClose가 false로 설정되어 있습니다.검도 UI IE에서 중간 마감 (도장 예)

사용자가 여러 항목을 선택하면 (원본 입력 필드가 커짐) MultiSelect 목록이 임의로 닫히는 것 같습니다.

재현 방법 : http://dojo.telerik.com/aKeGu/4

  • 가 다중 선택 상관 통찰력 이해된다
  • 를 폐쇄 할 때까지 다중 선택의 모든 단일 아이템을 선택하는 시작

    • 로드.

      감사합니다.

    답변

    0

    실제로는 임의로 닫히지 않지만 "팝업"컨테이너가 수직 공간을 벗어나면 스크롤을 시작하자마자 닫힙니다. 스크롤 이벤트로 인해 드롭 다운이 닫히고 있습니다. 팝업에 overflow-y: none;을 설정하면 문제가 사라지는 것을 알 수 있습니다.

    IE에서이 문제를 해결할 수있는 유일한 방법은 컨테이너가 스크롤하지 못하도록하는 방법입니다. 분명히 그게 당신을 위해 몇 가지 UI 의미가있을 것입니다, 그래서 당신은 CSS를 통해 그것을 할 것인지 또는 스크롤 이벤트를 소비하고 취소 할 자바 스크립트를 사용할지 결정해야합니다. http://dojo.telerik.com/OJugu

    을하고 또한 스레드를 살펴 걸릴 : 여기 http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/prevent-close-on-scroll

    과 :

    현재 위치 드롭 다운 목록에 비슷한 스크롤 문제에 대한 몇 가지 솔루션을 볼 수 있습니다 http://www.telerik.com/forums/scrolling-bug-causes-multiselect-dropdown-to-close-(with-dojo-example)

    +0

    감사합니다, 나는 스크롤 이벤트 핸들러 길을 갔다. 이 예제 들과는 조금 달랐지 만 솔루션은 비슷합니다. – comfortablEnum

    0

    나는 해결책을 결정을 . 스크롤 이벤트 이전에 드롭 다운이 닫혀있는 것 같았습니다. 그래서 스크롤 이벤트를 가로 채서 취소하고 다시 드롭 다운합니다.

    근무 예 : http://dojo.telerik.com/aWAQu/6

    솔루션 :

    $('.caregiver-window-fixed-height').on('scroll', function (e) { 
        var $widget = $('#careGiverHelpTags').data("kendoMultiSelect"); 
    
        if (e.type == "scroll" && $widget.wrapper.hasClass('k-state-focused') && $widget.list.is(':visible')) { 
         e.preventDefault(); 
         e.stopImmediatePropagation(); 
         $widget.open(); 
        } 
    });