jQuery AutoComplete在首次使用后显示在元素后面 [英] jQuery AutoComplete displaying behind elements after first use
问题描述
已解决: 最终导致将div附加到正文时,任务编辑器div的Z索引设置为高于自动完成.现在我只是觉得呆了两个小时而已.
SOLVED: Ended up being that the Z-index of the task editor div was being set higher than the autocomplete when the div was appended to the body. Now I just feel silly spending two hours with this.
我当前正在修改jQuery Gantt Chart插件(这是原始插件演示的链接 http ://gantt.twproject.com/distrib/gantt.html ).而且,我正在尝试通过向资源行中添加自动完成功能来更改任务编辑,以便轻松地从我的公司中抢购一名员工.
I am currently modifying a jQuery Gantt Chart plugin (here is a link to the original plugin demo http://gantt.twproject.com/distrib/gantt.html). And I am trying to change the task editing by adding an auto-complete to the resource rows so that it is easy to grab an employee from my company.
自动完成功能正常运行,并使用以下CSS首次在创建的完整编辑div的前面显示:
The autocomplete is working properly and displays infront of the created full edit div for the first time using the following CSS:
.ui-autocomplete
{
position:relative;
cursor:default;
z-index:9999 !important;
}
(我同时使用了相对定位和绝对定位都产生相同的结果)
(I have used both relative and absolute positioning both yielding the same result)
如果我继续将资源添加到第一个打开的编辑div中,则自动完成功能将继续正常运行.但是,在保存更改并打开另一个编辑div之后,自动完成功能将返回显示在编辑div后面.
If I keep adding resources to the first open edit div, the autocompletes continue to work properly. But after I save the changes and open up another edit div the autocomplete goes back to displaying behind the edit div.
只有当我将一个文本字段设置为自动完成后,才会出现这种情况.然后,其余的隐藏在任务编辑器div后面.
It only appears to happen once I have made one text field an autocomplete. Then after that the remaining ones are hidden behind the task editor div.
我一直在寻找其他遇到问题的人,但是我还没有找到其他有关此问题的帖子.
I have been looking around for anyone else who has had the problem, but I haven't found any other posts about this.
推荐答案
请在您的CSS文件中添加以下样式.它对我有用,希望它也对您有用.
Please add the following style to your CSS file. It worked for me and hope it will also work for you.
.pac-container {
z-index: 1051 !important;
}
这篇关于jQuery AutoComplete在首次使用后显示在元素后面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!