자동 완성 목록이 다른 컨트롤 뒤에 숨김

내 레일 애플리케이션에서 사용자는 여러 패턴을 추가하고 여러 패턴을 특정 패턴에 할당 할 수 있습니다. 위치는 자동 완성 필드입니다.자동 완성 목록이 다른 컨트롤 뒤에 숨김

_pattern_form.html.erb

<% f.fields_for:patterns do |builder| %> 
    <%= render 'pattern_fields', :f => builder %> 
<% end %> 

<p class="add_fields"><%= link_to_add_patterns "Add Book", f, :patterns %></p>

_pattern_fields.html.erb

<div class="fields" style="z-index: 1;"> 

    Pattern Pub: <%= f.select(:PAT_PUB, [['A', 'A'], 
        ['B', 'B'], 
        ['C', 'C']]) %> 


    <div>  
     <% f.fields_for :location do |builder| %> 
     <%= render 'location_fields', :f => builder %> 
     <% end %> 
    </div> 

</div>

_location_fields.html.erb

<%= f.text_field_with_auto_complete :LCN_ADJACENT_TO , { :size => 55, :style=>" z-index:100;"}, { :url => formatted_locations_path(:js), :method => :get, :skip_style => true, :param_name => 'search' } %>

유일한 문제는 사용자가 위치 자동 완성 필드에 입력 할 때 자동 완성 목록이 다른 패턴 필드 뒤에 숨겨져 있다는 것입니다.

나는 다음과 같은 CSS를 만들고 'auto_complete'클래스에 100의 Z- 인덱스를 부여했지만 헛된 것입니다.

.auto_complete { 
    z-index: 100; 
} 

.auto_complete ul{ 
    padding: 0px; 
    margin: 0px; 
    list-style-type:none; 
    background: #F0F8FF; 
    z-index: 100; 
} 

.auto_complete li{ 
    padding-left: 0px; 
    margin-left: 0px; 
    text-align: left; 
    z-index: 100; 

}

페이지 목록 상단에 추천 목록을 표시하는 방법에 대한 제안.

의견을 보내 주셔서 감사합니다.

출처

2012-09-25 Kim

z-index은 위치 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동합니다. 다른 요소 ("패턴 필드")도 배치해야합니다.

출처

2012-09-25 15:32:33 ksol

그냥 postion을 추가하려고 시도했는데 CSS에 절대적으로 적용되지만 아무 것도하지 않습니다. – Kim

이번에는 약간 내 대답을 편집했습니다. :) – ksol

제안을 주셔서 대단히 감사합니다, 나는 뭔가를 얻을 때까지 포지셔닝을 시도 할 것입니다 :) – Kim

자동 완성 목록이 다른 컨트롤 뒤에 숨김

답변

관련 문제