无法在自动填充字段上应用z-index

时间:2018-01-18 16:52:05

标签: html css autocomplete

在我的网站上,我有一张地图“Leaflet”,在droute的菜单中,我有一个研究领域“Adessse”。当我在地址字段中输入城市的第一个字母时,它会显示一个消息列表。我的问题是这个列表出现在菜单上。

我的菜单的z-index为1028,我想保留它。

如何在自动填充字段上应用102的z-index?

enter image description here

我用以下方法解决了问题:

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

现在它可以工作了,但列表不在窗外。我希望她留在菜单中:

enter image description here

在移动设备上,这是一个很大的问题:

enter image description here

enter image description here

2 个答案:

答案 0 :(得分:2)

我想这里的问题是你将这个z-index值应用于输入字段,而你必须在你想要显示的搜索结果列表中应用它。 在我的django代码中看到这里..

{% for p in p1|slice:":7" %}
<li style="font-size:20px;z-index:4;" class="list-group-item"><a href="/products/product_info/{{p.id}}/">{{p.productname}}</a></li>
{% endfor %}

我有一个for循环来显示搜索结果列表。每个结果都显示在此列表标签下,其中z-index比其他标记高。您还可以查看我的website link以查看它是否正常工作,在搜索栏中搜索某些内容。

答案 1 :(得分:0)

@ 3cfe5693好的,我明白你的意思了。它不是z-index问题。我认为你有一些问题正在结合。

您的.ui-menu-item类实际上是一个列表,您已经在左侧和右侧给出了填充。尝试将这些设置为0px。该框也会随着文本内部展开而扩展,因此给它一个固定的宽度 - 无论它上面的搜索框的宽度是多少。接下来,您可能需要在课程中添加word-wrap: break-word;以打破非常长的单词 - 它看起来不需要它,因为该框足够宽以容纳长单词,但添加它没有任何害处。

阅读此页面,解释自动换行及其完成方法https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/