jQuery-UI의 자동 완성이 잘 표시되지 않음, z-index 문제

jQuery-UI의 자동 완성이 잘 표시되지 않음, z-index 문제

저는 현재 고객사 웹샵에서 jQuery UI의 자동완성을 구현하고 있습니다.문제는 자동 완성이 위치한 요소가 자동 완성의 z 지수보다 높다는 것입니다.수동으로 자동 완성 z-index를 설정하려고 했는데 jQuery UI가 이것을 덮어쓰는 느낌이 들어요.

사실 제 질문은 자동 완성 제안 목록이 잘못된 z-index를 중복한 것인데 어떻게 변경할 수 있을까요? 하지만 답이 없어서 다시 해볼까 생각했습니다.

어떤 도움이라도 환영합니다!

마르틴

사용하다z-index그리고.!important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

검색을 하다가 이 주제(http://forum.jquery.com/topic/alternating-style-on-autocomplete) 를 발견했습니다.자동 완성 상자의 스타일을 변경할 수 있는 유일한 방법은 javascript를 통해 변경하는 것입니다.

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

상위 Div의 z-index를 변경하면 자동 완성 메뉴에 div의 z-index+1이 표시됩니다.

CSS에서jQuery UI:

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

실행 시 z-index를 조작하거나 초기화할 수 있습니다.

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

자동 완성 텍스트 입력 시 더 높은 z 인덱스를 적용할 수 있다면 이것이 문제 해결 방법입니다.

jQuery UI Autocomplete 옵션 목록은 첨부 중인 텍스트 입력의 z 인덱스를 사용하여 z 인덱스 값을 계산하고 해당 값에 1을 추가합니다.

따라서 텍스트 입력에 999의 z 인덱스를 부여할 수 있습니다. 자동 완성은 1000의 z 인덱스 값을 갖습니다.

http://bugs.jqueryui.com/ticket/5489 에서 가져온 자료

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

또한 항목을 어디에 추가하는지 확인하십시오. 내부 디브에 자동 완성을 추가할 때 이 문제를 발견했지만 자동 완성을 바디 태그에 추가할 때 문제가 사라졌습니다.

jquery-ui 대화 상자를 사용하는 경우 자동 완료 또는 자동 완료가 대화 상자 아래에 표시되기 전에 대화 상자를 초기화해야 합니다.

modal ui 대화상자 안에서 이 답변 jquery UI 자동완료를 보세요 - 제안사항이 표시되지 않습니까?

저도 같은 문제에 직면해 있었는데, 벨로우즈 스타일을 추가하여 해결되었습니다.

.ui-autocomplete { 
  position: absolute; 
  cursor: default;
  z-index:30!important;
}  
.modal-dialog {
  pointer-events:auto !important;
}

파이어버그가 아닌 CSS에서(스크립트 로딩 전) 어쨌든 시도해 보십시오.

.ui-selectmenu-menu {
    z-index:100;
}

내 경우 이것은 작동하고 다음과 같은 z 인덱스를 만듭니다: 100x(예: 1002).

다음 사항을 덧붙입니다

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

jquery-custom-ui.css 파일(또는 사용 중인 경우 최소화된 파일)을 입력합니다.

여전히 이 플러그인을 사용하는 개발자들을 위해.시도해 보기:

.acResults
{
    z-index:1;
}

저는 z-index:1로 충분했습니다. 당신의 경우에 필요한 값을 설정하세요.

언급URL : https://stackoverflow.com/questions/6762174/jquery-uis-autocomplete-not-display-well-z-index-issue