文章/答案/技术大牛

发布

社区首页 >问答首页 >使令牌域自动完成宽度与令牌域输入框相同

问使令牌域自动完成宽度与令牌域输入框相同
EN

Stack Overflow用户

提问于 2020-07-11 07:07:31

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

我使用的是bootstrap标记字段。如何使自动完成下拉框的宽度与输入框的宽度相同？目前，宽度只是理想宽度的一小部分。

请看下面的代码，如何自动完成宽度与输入框宽度不一致！令牌域处于“启动演示”模式。

$('.show').click(function() {
  var width = $('.tokenfield').outerWidth();
  $('.another input').width(width);
  $('.another').slideToggle();
});
$('#tokenfield').tokenfield({
  autocomplete: {
    source: ['Test 1',
      'Test 2',
      'Test 3'
    ],
    delay: 100
  },
  showAutocompleteOnFocus: true
})

.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;
}

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

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

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

javascript

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-11 12:39:45

在文档(https://sliptree.github.io/bootstrap-tokenfield/)中，您可以使用token字段的minWidth选项来提供初始的任意宽度。

<!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;
    }
  </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>

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </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>
  $('.show').click(function() {
    var width = $('.tokenfield').outerWidth();
    $('.another input').width(width);
    $('.another').slideToggle();
  });
  $('#tokenfield').tokenfield({
    autocomplete: {
      source: ['Test 1',
        'Test 2',
        'Test 3'
      ],
      delay: 100
    },
    showAutocompleteOnFocus: true,
    minWidth: 466
  })
</script>


</html>

出于响应的目的，您必须想出一种利用媒体查询的方法。示例：

@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 */
    }
}

票数 0

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

原文链接：

https://stackoverflow.com/questions/62843454

复制

相似问题

问使令牌域自动完成宽度与令牌域输入框相同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使令牌域自动完成宽度与令牌域输入框相同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使令牌域自动完成宽度与令牌域输入框相同
EN