У меня есть поле токена 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">×</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 = [];
for(i = 0; i < 100; i++){
sourceDataObj.push(String(i));
}
$('#tokenfield').tokenfield({
autocomplete: {
source: sourceDataObj,
delay: 100
},
showAutocompleteOnFocus: true,
minWidth: 466
});
</script>
</html>