Как остановить выпадающий выпадающий список Bootstrap / Popper.js в верхней части страницы на небольшой высоте страницы? - PullRequest
Новая
       24

Как остановить выпадающий выпадающий список Bootstrap / Popper.js в верхней части страницы на небольшой высоте страницы?

0 голосов
/ 15 февраля 2019

У меня есть раскрывающееся меню Bootstrap / Popper.js, которое перемещается в верхнюю часть страницы, когда высота страницы становится меньше, чем раскрывающееся меню (то есть, когда высота уменьшается до точки, меню больше не может соответствоватьна странице).

Вместо того, чтобы все раскрывающееся меню перемещалось вверх страницы, как это происходит в настоящее время, я бы хотел, чтобы оно оставалось там, где оно есть.Как я могу это сделать?

Например:

Когда высота страницы позволяет раскрывающемуся меню соответствовать

dropdown fit

Когда высота страницы слишком мала для раскрывающегося меню, чтобы поместиться

dropdown no fit

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="dropdown custom-drop hide">
    <a class="btn float-right btn-secondary btn-lg dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu
  </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <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>
  <style>
    .dropdown {
      position: absolute;
      z-index: 99;
      width: calc(100% - 320px);
      top: 100px;
      right: 0px;
    }
    
    .dropdown-toggle {
      margin-right: 50px;
    }
    
    .dropdown-menu {
      position: absolute;
      text-align: center;
      z-index: 999;
      width: calc(100% + 320px);
    }
    
    .dropdown-item {
      padding: 0.75rem 1.5rem;
      width: 100%;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>
...