ui-autocomplete,列出悬停时更改高度

时间:2016-03-11 13:03:15

标签: jquery css jquery-ui autocomplete jquery-ui-autocomplete

我的自动填充列表会更改其高度,我似乎无法找到它。这种情况发生在我移除边框时,它会将对象移动到内部。

为了停止发生这种情况,我需要改变什么类?正如您在图片中看到的那样,每次因某种原因将鼠标悬停时,列表的高度都会发生变化。我尝试过更改这些课程:.ui-state-focus& .ui-menu-item

基本上问题是:我悬停,看起来所有的元素都是"跳跃"在右上角,这是在我从.ui-state-focus

中删除边框后发生的

hover

not hover

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:"/>

0 个答案:

没有答案