0

在我的 rails 应用程序中，用户可以添加多个模式并将多个位置分配给特定模式。该位置是一个自动完成字段。

_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-index，但徒劳无功。

.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;

}

有关如何使建议列表显示在页面内容顶部的任何建议。

非常感谢您的建议。

4

1 回答 1

1

z-index仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。其他元素（您的“模式字段”）也应该定位。

于 2012-09-25T15:32:33.607 回答