Как запретить или отключить режим автоматического позиционирования Bootstrap 4 popover (Саморегулирующееся поведение) - PullRequest
Новая
       13

Как запретить или отключить режим автоматического позиционирования Bootstrap 4 popover (Саморегулирующееся поведение)

1 голос
/ 09 мая 2019

Я использую каркас Bootstrap 4 в своем проекте и использую popover для моих требований. Пока я использую поповер, я заметил, что сам поповер самостоятельно настраивает положение, когда область просмотра изменяется с портретной на альбомную.

Поповер имеет фиксированную высоту, и я указал размещение данных как нижнее. При переключении из портретного в ландшафтное положение он самонастраивается и переходит в верхнее положение.

Мое требование заключается в том, что мне нужно, чтобы расположение поповера было снизу во всех экранах и окнах просмотра, и я хотел, чтобы его саморегулирующееся поведение не изменялось снизу вверх.

Пока я изучал проблему, я обнаружил, что высота превышает высоту порта просмотра и, следовательно, вызывает проблему.

Любая помощь или решение будет принята с благодарностью. Заранее спасибо. :) 

Link : `https://jsbin.com/paladipepi/1/edit?html,css,js,output`

Шаг для воспроизведения:

1) Открыть ссылку https://jsbin.com/paladipepi/1/edit?html,css,js,output, вывод в браузер Chrome

2) Откройте эмулятор, выберите любое мобильное устройство (iPhone6 ​​/ iPhoneX) и нажмите всплывающее окно.

3) Переключиться в ландшафтный режим

Ожидаемый результат: должен быть указан как нижний

Фактический результат: автоматическая настройка на верхнюю позицию.

код 

$(function () {
  $('[data-toggle="popover"]').popover({
  trigger: 'focus'
})
})
.subheader{
  position:sticky;
}

.popover-body{
  height:340px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
  </header>
  <div class="subheader">
    
<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Active</a>
  <a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 1</a>
  <a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 2</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 3</a>
</nav>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
  

</html>

Ответы [ 2 ]

2 голосов
/ 09 мая 2019

Ура !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Получил решение

установите для параметра fallbackPlacement значение ['left', 'right', 'top', 'bottom'] в параметрах Bootstrap Popover 

Link: https://popper.js.org/popper-documentation.html#modifiers..flip.behavior

<script>
    $(function() {
        $('[data-toggle="popover"]').popover({
            container: '.subheader',
            fallbackPlacement : ['left', 'right', 'top', 'bottom']
        })
    })
</script>
0 голосов
/ 09 мая 2019

Popover основан на popper.js.Положение определяется как «bottom», но всякий раз, когда вы видите его в ландшафтном режиме iphone, у popover нет места для отображения его в нижней позиции из-за его высоты в 340px, следовательно, он вынужден рендериться сверху (хотя это поведение правильно),Теперь в соответствии с вашими требованиями вы можете попробовать удалить высоту .popover-body на iphone landscape или уменьшить ее, используя media queries и установить height в 100% html и body.

Надеюсь, это поможет !!!

...