Добрый день, я только начал свои шаги в сети.
Такой вопрос, у меня все выпадающие списки перекрываются другими элементами, которые ниже, как этого избежать?
Выпадающие списки блокируются абсолютно любыми элементами, расположенными под ними.
Это состояние исчезает, если вы прокручиваете страницу вниз, но это не всегда возможно и не является хорошим решением.
Исходный код:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Project Method</title>
<!-- Google Captcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/static/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- Bootstrap Select -->
<link href="/static/css/bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbootstrap.com/docs/jquery/" target="_blank">
<strong>MDB</strong>
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank">Free download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free tutorials</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded"
target="_blank">
<i class="fab fa-github mr-2"></i>MDB GitHub
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar --> </header>
<div class="wrapper">
<!--Main layout-->
<main class="page-content mt-5 pt-5">
<div class="container">
<div class="container-fluid full-page-container">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-lg-6 col-sm-8 animated fadeIn">
<div class="card">
<h5 class="card-header pink lighten-3 white-text text-center py-4">
<strong>Добавление участников</strong>
</h5>
<div class="card-body px-lg-5 pt-0">
<form action="/projects/project/12/team/create" method="post"
style="color: #757575;">
<!-- CSRF Token -->
<input type="hidden" name="_csrf" value="90930bb8-44b3-4f26-8fe9-a62c46264360"/>
<div class="form-group">
<label for="teamName">Название команды</label>
<input type="text" id="teamName" name="teamName" value=""
class="form-control " required>
</div>
<div class="form-group">
<div id="select-form-control">
<select name="teamUsers"
class="selectpicker form-control "
data-actions-box="true"
data-dropup-auto="false"
data-live-search="true"
data-selected-text-format="count"
data-size="10"
data-style="btn-info text-white"
data-width="97%"
multiple
required
>
<option value="3">student student</option>
<option value="4">student student</option>
<option value="5">student student</option>
</select>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button"
onClick='location.href="/projects/project/12"'
class="btn btn-outline-pink waves-effect">
Отмена
</button>
<button type="submit" class="btn btn-unique waves-effect">
Сохранить
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<!--Call to action-->
<div class="pt-4">
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank" role="button">Download MDB
<i class="fas fa-download ml-2"></i>
</a>
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<!-- Social icons -->
<div class="pb-4">
<a href="https://www.facebook.com/mdbootstrap" target="_blank">
<i class="fab fa-facebook-f mr-3"></i>
</a>
<a href="https://twitter.com/MDBootstrap" target="_blank">
<i class="fab fa-twitter mr-3"></i>
</a>
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
<i class="fab fa-youtube mr-3"></i>
</a>
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
<i class="fab fa-google-plus-g mr-3"></i>
</a>
<a href="https://dribbble.com/mdbootstrap" target="_blank">
<i class="fab fa-dribbble mr-3"></i>
</a>
<a href="https://pinterest.com/mdbootstrap" target="_blank">
<i class="fab fa-pinterest mr-3"></i>
</a>
<a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">
<i class="fab fa-github mr-3"></i>
</a>
<a href="http://codepen.io/mdbootstrap/" target="_blank">
<i class="fab fa-codepen mr-3"></i>
</a>
</div>
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-3">
© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<!-- jQuery Multi -->
<script type="text/javascript" src="/static/js/multi.js"></script>
<!-- Bootstrap Select -->
<script type="text/javascript" src="/static/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/static/js/defaults-ru_RU.min.js"></script>
<!-- jQuery Validation -->
<script type="text/javascript" src="/static/js/jquery.validate.js.js"></script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
$(function () {
window.setTimeout(function () {
$('#my-alert').alert('close');
}, 5000);
});
$("form").validate();
</script>
</body>
</html>
