jQuery UI自动完成未正确设置样式

Question

我有自动完成功能，但显示不正确。我让你看到之前的一些屏幕： - 首先，宽度是错误的。它太宽了！我想在不设置宽度的情况下解决它（如果看到example on jquery-ui site，则未设置宽度）

• 其次，如果我的列表太长，它会在页脚上移动并在页脚下面留下一个大的空白区域（黑色可以看到页脚，红色表示自动完成菜单，白色位于红色菜单下面我有一个长列表时出现的空白区域）：

也许第二个请求没有意义，因为它工作正常，但我认为如果页脚在菜单中下去会更好。

这是我正在使用的CSS：

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;

}
.ui-menu .ui-menu {
    position: absolute;
}
.ui-menu .ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px .4em;
    cursor: pointer;
    min-height: 0; /* support: IE7 
    /* support: IE10, see #8844 */
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-autocomplete {
   /* max-height: 200px;*/
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
    /*max-width: 173px;*/
        background-color: red;
        border: 1px solid #dddddd;
}

任何人都可以帮我至少第一次请求吗？ 谢谢

Answer 1

解决了这个css

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    background-color:#fff;
    border: 1px solid #aaaaaa;
    max-height: 200px;

    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}