Bootstrap Элемент раскрывающегося списка TokenField мигает при выборе - PullRequest
Новая
       10

Bootstrap Элемент раскрывающегося списка TokenField мигает при выборе

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

В настоящее время я использую поле токена bootstrap с раскрывающимся списком автозаполнения. Однако при наведении курсора на раскрывающийся список становится очевидным, что текст слегка перемещается. Есть ли способ исправить это, чтобы текст вообще не перемещался при наведении курсора?

Пожалуйста, запустите код, чтобы увидеть проблему. Раскрывающийся список находится в модальном режиме. Большое спасибо за помощь! 

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

1 Ответ

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

Некоторые проблемы в вашем пользовательском CSS исправлены.

  1. У вас есть прозрачный фон, который не нужен.
  2. border:none !important не работает.
  3. .ui-menu-item нет необходимости использовать собственный стиль CSS для этого, так как стили, предоставляемые полями токенов, являются адаптивными.

Изменить: Я также добавил максимальную высоту и overflow-y, как вы хотели , если количество выпадающих элементов больше 10+, вы можете настроить высоту, как и sh.

Запустите фрагмент ниже, чтобы увидеть, как он работает. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...