Сделайте ширину автозаполнения поля маркера такой же, как поле ввода поля маркера - PullRequest
Новая
       11

Сделайте ширину автозаполнения поля маркера такой же, как поле ввода поля маркера

1 голос
/ 11 июля 2020

Я использую поле токена 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>

1 Ответ

0 голосов
/ 11 июля 2020

Из документации (https://sliptree.github.io/bootstrap-tokenfield/) вы можете использовать параметр 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 */
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...