CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrappopover
Raj
Raj

Reputation: 879

How to prevent or disable Bootstrap 4 popover auto positioning behavior (Self adjusting behavior)

I'm using Bootstrap 4 framework in my project and using the popover for my requirement. While i'm using the popover I have noticed that the popover itself self adjusting the position when the viewport is changed from portrait to landscape.

The popover is having a fixed height and I have given the data-placement as bottom. While switching from portrait to landscape it is self adjusting the position and changing to top position.

My requirement is that I need the popover placement as bottom in all screens and viewports and want to prevent its self adjusting behavior from bottom to top position.

While I investigate the issue i found that the height is exceeding from the View port height and hence causing the issue.

Any help or solution would be greatly appreciated. Thanks in advance. :)

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

Step to reproduce:

1) Open the link https://jsbin.com/paladipepi/1/edit?html,css,js,output,output output in Chrome browser

2) Open the emulator and select any mobile device (iPhone6/iPhoneX) and click the popover.

3) Switch to landscape mode

Expected result: Should be placed as bottom

Actual result : Auto adjusting to the top position.

Code

$(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>

Upvotes: 2

Views: 3602

Answers (4)

Milad
Milad

Reputation: 13

set the fallbackPlacement to 'counterclockwise' and position container to 'relative'

$('[data-toggle="popover"]').popover({
        container: '.container',
        html: true,
        trigger:'manual',
        fallbackPlacement: 'counterclockwise'
    })

Upvotes: 0

Andrey Izman
Andrey Izman

Reputation: 1914

Just set container and boundary to body, also set all fallback placements to bottom

$(function () {
  $('[data-toggle="popover"]').popover({
    trigger: 'focus',
    container: 'body',
    boundary: 'body',
    fallbackPlacement: ['bottom','bottom','bottom','bottom']
  })
})

https://jsbin.com/nojavagane/1/edit?html,css,js,output

Upvotes: 0

Raj
Raj

Reputation: 879

Hooray !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Got the solution

set the fallbackPlacement to ['left', 'right', 'top', 'bottom'] in Bootstrap Popover options

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>

Upvotes: 2

Kunal Virk
Kunal Virk

Reputation: 161

Popover is based out of popper.js. The position is defined to 'bottom' but whenever you see it in iphone landscape mode, the popover has not room to display it in bottom position because of it's height of 340px, hence forcing it to render from top (this behavior is right though). Now to your requirements you could try removing the height of .popover-body on iphone landscape or reduce it, using media queries and set height to 100% of html and body.

Hope it helps!!!

Upvotes: 0

Related Questions