73

我在模态对话框引导程序内的 jQuery 自动完成中出现显示问题。

当我鼠标滚动时，结果不会保持附加到输入。

有没有办法解决这个问题？

这里JsFiddle：

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

编辑 我发现了问题：

.ui-autocomplete {
  position: fixed;
  .....
}

如果模态有滚动问题仍然存在！

这里JsFiddle/1。

4

12 回答 12

117

位置是正确的，它是“绝对的”，而您需要将其指定为自动完成的选项：

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

它可以在任何元素中锚定带有结果的框，我必须阻止它被锚定到表单的类！

这是一个有效的 JsFiddle！.

于 2013-04-21T18:04:33.477 回答
55

上述关于该z-index问题的解决方案有效：

.ui-autocomplete { z-index:2147483647; }

确保将其放在.js负责处理模态和自动完成逻辑的脚本之前。

于 2013-08-08T15:05:42.363 回答
29

查看 appendTo 文档：

当值为 null 时，将检查输入字段的父类是否为 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。

因此，只需将“ui-front”类添加到父元素，自动完成功能就会正确显示在模态框内。

于 2014-07-29T17:57:20.470 回答
22

将类“ui-front”添加到 div 父元素，自动完成将正确显示在 PopUp For Me 中。

于 2016-07-16T13:39:30.560 回答
14

实际问题是引导模式的 Z-index 比页面中的任何其他元素都高。因此，自动完成实际上有效 - 但它隐藏在对话框后面。

您只需将其添加到您添加的任何css文件中：

.ui-autocomplete {
  z-index:2147483647;
}
于 2013-04-29T08:41:10.190 回答
5

为了解决这个问题，我只需要css通过 jQuery 更改文件：

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

注意：在 jquery-ui.css & jquery-ui.js 之后添加这个 css

于 2015-10-08T15:41:14.277 回答
4

试试添加这个：

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

只要确保您对房产给予很高的价值并添加

！重要的

这真的很重要。后者将告诉您的浏览器首先执行此规则，然后再执行同一类的任何其他规则。希望它会有所帮助

于 2016-01-20T15:38:57.220 回答
1

在文件中：styles.css

.cdk-overlay-container
{
    z-index: 9999 !important;
}

我在组件的内部 css 文件中尝试了所有解决方案，但没有任何效果，只有将其移动到 styles.css 时。

祝你好运

于 2020-11-25T09:20:25.250 回答
0

添加appendTo选项解决了这个问题。它将菜单附加到引导模型中的对象之一。

于 2016-01-08T22:44:40.173 回答
0

我通过这个解决了......

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

自动完成扩展器完成列表有一个像这样的自动 ID id=' _completionListElem '

所以你必须向上推 z-index .. 然后是引导模式面板；）

希望能帮助到你

于 2017-09-11T16:42:52.827 回答
0 
<style>
.ui-front {
    z-index: 5000;
    position: relative;
}
</style>
于 2021-02-28T07:19:49.020 回答
-1 
.ui-front {
    z-index: 9999;
}

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>
于 2016-09-28T15:33:32.260 回答