Bootstrap TokenField下拉项在选择时闪烁 [英] Bootstrap TokenField dropdown Item Flickering on Select

查看：83
本文介绍了Bootstrap TokenField下拉项在选择时闪烁的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我当前正在使用带有自动完成下拉列表的引导令牌字段.但是，当您将鼠标悬停在下拉菜单上时，很明显文本会稍微移动.有什么办法可以解决此问题，从而使文本在悬停时完全不会移动?

I am currently using a bootstrap tokenfield with an autocomplete dropdown. However, when you hover over the dropdown, it is very evident that the text moves slightly. Is there any way to fix this, so that the text does not move at all on hover?

请运行代码以查看问题.下拉列表位于模式中.非常感谢您的帮助！

Please run code to see the problem. The dropdown is in the modal. Thanks so much for the help!

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<style>
      .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
        z-index: 1051; // Or more
      }

      .token-input {
        width: 25vmin !important;
      }

      .tokenfield .token {
        height: 25px;
      }

      .ui-menu-item-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: transparent;
        border: none !important;
        text-decoration: none;
        }

      .ui-menu-item {
          display: block;
          width: 100%;
          padding: 0.25rem 1.5rem;
          clear: both;
          font-weight: 400;
          color: #000000;
          text-align: inherit;
          white-space: nowrap;
          background-color: transparent;
          border: 0;
          border-radius: 0.5rem;
        }

        .ui-menu-item:hover, .ui-menu-item:focus {
          color: #ffffff;
          text-decoration: none;
          background-color: #eaeaf1;
        }

        .ui-menu-item:hover{
          color: #ffffff;
        }

        .ui-menu:hover  .ui-menu-item-wrapper, .ui-menu-item-wrapper:hover{
            background: transparent;
            border: none;
        }
        .ui-menu {           border-radius: 3px !important;         }

        .form-control {
          height: inherit;
        }

      @media (max-width: 600px) {
        .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
            width: auto !important; /* important is used because tokenfield api uses inline styling */
        }
      }
</style>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="tokenfield" value=""/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</body>

<script>

          var sourceDataObj = ["test1", "test2", "3tests"];

            $('#tokenfield').tokenfield({
                autocomplete: {
                    source: sourceDataObj,
                    delay: 100
            },
                showAutocompleteOnFocus: true,
                    minWidth: 466

            });
</script>
</html>

推荐答案

自定义CSS中的一些问题现已修复.

Few issues in your custom CSS fixed now.

  1. 您有一些不需要的透明背景.
  2. border:none !important无法正常工作.
  3. .ui-menu-item无需为此使用自定义CSS样式，因为令牌字段提供的样式具有响应性.
  1. You have some background transparent which is not needed.
  2. border:none !important is not working.
  3. .ui-menu-item no need to use custom CSS style for this as the styles provided by token fields are responsive.

我还添加了一个最大高度，并在您想要时添加了y，如果您的下拉菜单项大于10，则可以根据需要调整高度也是.

I have also added a max height and overflow-y as you wanted if your dropdown items are more then 10+ you can adjust the height as you wish too.

运行下面的代码片段以查看其工作情况.

Run snippet below to see it working.

$(document).ready(function() {
    var sourceDataObj = ["test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests",];
  $('#tokenfield').tokenfield({
    autocomplete: {
      source: sourceDataObj,
      delay: 100
    },
    showAutocompleteOnFocus: true,
    minWidth: 466

  });

});

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  z-index: 1051; // Or more
}
 
 #ui-id-1 {
   overflow-y: scroll;
   height: 300px;
 }

.token-input {
  width: 25vmin !important;
}

.tokenfield .token {
  height: 25px;
}

.ui-menu-item-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ui-menu {
  border-radius: 3px !important;
}

.form-control {
  height: inherit;
}

@media (max-width: 600px) {
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    width: auto !important;
    /* important is used because tokenfield api uses inline styling */
  }
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</head>

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
  <style>

  </style>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" id="tokenfield" value="" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>

这篇关于Bootstrap TokenField下拉项在选择时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆