jQuery-UI의 자동 완성이 제대로 표시되지 않음, Z- 색인 문제

현재 내 클라이언트 웹샵에서 jQuery UI의 자동 완성을 구현하고 있습니다. 문제는 자동 완성이있는 요소가 자동 완성의 Z- 색인보다 높은 Z- 색인을 갖는다는 것입니다. 자동 완성 Z- 색인을 수동으로 설정하려고 시도했지만 jQuery UI가 이것을 덮어 쓰는 느낌이 듭니다.

사실 내 질문이 자동 완성 제안 목록 의 중복 된 Z- 색인입니다. 어떻게 변경할 수 있나요? 하지만 답이 없었기 때문에 다시 시도 해볼까 생각했다.

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

Martijn

사용 z-index및!important

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

검색하는 동안이 주제 (http://forum.jquery.com/topic/alternating-style-on-autocomplete)를 찾았습니다. 자동 완성 상자의 스타일을 변경하는 유일한 방법은 자바 스크립트를 통해 수행하는 것입니다.

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

상위 Div의 Z- 색인을 변경하면 자동 완성 메뉴에 div의 Z- 색인 +1이 표시됩니다.

의 CSS에서 jQuery UI:

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

이것을 시도하면 런타임 또는 초기화시 Z- 색인을 조작 할 수 있습니다.

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

자동 완성 텍스트 입력에 더 높은 Z- 색인을 적용 할 수 있다면 이것이 문제의 해결책입니다.

jQuery UI Autocomplete 옵션 목록은 첨부되는 텍스트 입력의 Z- 색인을 가져 와서 해당 값에 1을 더하여 Z- 색인 값을 계산합니다.

따라서 텍스트 입력에 999의 Z- 색인을 제공 할 수 있습니다. 자동 완성의 Z- 색인 값은 1000입니다.

http://bugs.jqueryui.com/ticket/5489 에서 가져옴

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

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

또한 항목을 추가하는 위치를 확인하십시오. 내부 div에 자동 완성을 추가했을 때이 문제가 발생했지만 본문 태그에 자동 완성을 추가하면 문제가 사라졌습니다.

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

모달 UI 대화 상자 내 에서이 답변 jquery UI 자동 완성을 보십시오 -제안 사항이 표시되지 않습니까?

어쨌든 firebug가 아닌 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로 충분했습니다. 귀하의 경우에 필요한 값을 설정하십시오.