文章/答案/技术大牛

发布

社区首页 >问答首页 >引导TokenField下拉项目在选择上闪烁

问引导TokenField下拉项目在选择上闪烁
EN

Stack Overflow用户

提问于 2020-07-11 20:36:30

回答 1查看 390关注 0票数 1

我目前正在使用一个带有自动完成下拉列表的引导托肯字段。但是，当您悬停在下拉列表上时，很明显文本略有移动。有没有办法解决这个问题，这样文本就不会在悬停状态下移动？

请运行代码查看问题。下拉式在模态中。非常感谢你的帮助！

<!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

twitter-bootstrap

javascript

html

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-11 20:58:08

现在，您的自定义CSS中很少有问题得到解决。

您有一些背景透明的needed.

border:none !important不是working.

.ui-menu-item，不需要为此使用自定义的CSS样式，因为令牌字段提供的样式是响应的。

编辑：，我也添加了一个最大高度和溢出-y，你想要的，如果你的下拉项目是更多，然后10+，你也可以调整高度，你想。

运行下面的片段，以确保它的工作。

$(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>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62854315

复制

相似问题

问引导TokenField下拉项目在选择上闪烁
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导TokenField下拉项目在选择上闪烁EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导TokenField下拉项目在选择上闪烁
EN