我的自动填充列表会更改其高度,我似乎无法找到它。这种情况发生在我移除边框时,它会将对象移动到内部。
为了停止发生这种情况,我需要改变什么类?正如您在图片中看到的那样,每次因某种原因将鼠标悬停时,列表的高度都会发生变化。我尝试过更改这些课程:.ui-state-focus
& .ui-menu-item
基本上问题是:我悬停,看起来所有的元素都是"跳跃"在右上角,这是在我从.ui-state-focus
CSS:
#ui-id-1 {
border: 2px solid #e1e4e6;
border-radius: 5px;
top: 5px;
}
.ui-state-focus {
background: none !important;
background-color: #e7eff2 !important;
height: 62px!important;
width: auto!important;
border: none!important;
padding: 3px 1em 3px .5em!important;
}
.ui-menu-item {
height: 60px;
width: auto;
}
.personSearch {
position: relative;
}
.user-photoSearch {
width: 35px;
height: auto;
position: relative;
left: 15px;
top: 15px;
}
.nameUser {
font-family: "Open Sans";
font-size: 0.875em;
display: inline-block;
position: relative;
left: 35px;
color: #35383a;
top: -5px;
}
.positionUser {
font-family: "Open Sans";
font-size: 0.875em;
position: relative;
left: 70px;
color: #8b959a;
top: -5px;
}
JS:
searchBox.autocomplete({
source: function(request, response) {
$.ajax({
url: "../module/listOfNamesCreateNewMsg.inc.php",
data: {
value: searchBox.val().toLowerCase()
},
dataType: "json",
type: "POST",
success: function(data) {
response($.map(data.slice(0, 5), function(obj) {
return {
name: obj.name,
position: obj.pos,
img: obj.img,
id: obj.id
};
}));
}
});
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<div class='personSearch'>" + "<img class='user-photoSearch'src='" + item.img + "'</img><p class='nameUser'>" + item.name + "</p><p class='positionUser'>" + item.position + "</p><p class='id' hidden>" + item.id + "</p></div>")
.appendTo(ul);
};
HTML:
<input type="text" class="searchName" multiple="multiple" placeholder="Send message to:"/>