부트스트랩 모드로 자동 완성 문제 발생

부트스트랩 모드로 자동 완성 문제 발생

modal dialog bootstrap 내부의 jQuery autocomplete에 디스플레이 문제가 있습니다.

마우스를 스크롤하면 결과가 입력에 첨부되지 않습니다.

이것을 해결할 방법이 있습니까?

여기 JSFiddle:

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

편집 문제 발견:

.ui-autocomplete {
  position: fixed;
  .....
}

모드에 스크롤이 있으면 문제가 남아 있습니다!

여기 JsFiddle/1.

"절대"라는 위치가 맞지만, 자동 완료 옵션으로 지정해야 합니다.

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

어떤 요소에서든 결과물과 함께 상자를 고정할 수 있는 곳에서, 저는 상자가 양식의 클래스에 고정되는 것을 막아야 합니다!

여기 일하는 JSFiddle이 있습니다!

위의 해결책은.z-index문제가 작동됨:

.ui-autocomplete { z-index:2147483647; }

그것을 당신의 앞에 놓아야 합니다..jsmodal 및 autoccomplete 로직을 처리하는 스크립트입니다.

첨부 문서를 확인합니다.

값이 null일 경우 입력 필드의 부모는 ui-front 클래스를 확인합니다.ui-front 클래스가 있는 요소가 발견되면 해당 요소에 메뉴가 추가됩니다.

따라서 클래스 "ui-front"를 상위 요소에 추가하면 자동 완성이 모드 내부에 올바르게 표시됩니다.

분할 요소에 "ui-front" 클래스를 추가하면 자동 완성이 Pop Up For Me(팝업 포 미) 내부에 올바르게 표시됩니다.

실제 문제는 부트스트랩 모달이 페이지의 다른 어떤 요소보다 Z-인덱스가 높다는 것입니다.따라서 자동 완성은 실제로 작동하지만 대화 상자 뒤에 숨겨져 있습니다.

이 내용을 추가하면 됩니다.css파일:

.ui-autocomplete {
  z-index:2147483647;
}

이 문제를 해결하기 위해 저는 단지 수정할 필요가 있었습니다.css파일:jQuery:

.ui-front {
    z-index: 9999;
}

참고: jquery-ui.css & jquery-ui.js 뒤에 이 css를 추가합니다.

다음 내용을 추가해 보십시오.

.ui-autocomplete {
  z-index: 215000000 !important;
}

부동산에 높은 가치를 부여하는지 확인하고 DO ADD.

!중요한

정말 중요합니다.후자는 브라우저에 이 규칙을 같은 클래스보다 먼저 실행하도록 지시합니다.도움이 되기를 바랍니다.

파일: styles.css

.cdk-overlay-container
{
    z-index: 9999 !important;
}

구성요소의 내부 css 파일에 있는 모든 솔루션을 시도해 보았는데 styles.css로 옮겨야 아무 것도 작동하지 않습니다.

행운을 빌어요

<style>
.ui-front {
    z-index: 5000;
    position: relative;
}
</style>

추가하기appendTo옵션을 통해 이 문제가 해결되었습니다.부트스트랩 모델의 개체 중 하나에 메뉴를 추가했습니다.

나는 이것으로 해결했습니다..

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

자동 완성 익스텐더 완료 목록에는 ID='_completeListElem'과 같은 자동 ID가 있습니다.

z 지수를 올려주셔야 합니다.부트스트랩 모달 패널 위쪽 ;)

도움이 되길 바랍니다.

.ui-front {
    z-index: 9999;
}

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

언급URL : https://stackoverflow.com/questions/16133654/autocomplete-issue-into-bootstrap-modal