Positioning.getAvailablePositions()‘s checks are incorrect, resulting in “auto” placement being resolved to “top” if there is enough space above, even if there is not enough horizontal space. In this case “top-left” or “top-right” would be more appropriate.
Positioning.setSecondaryPlacementForTopBottom() uses height instead of width to determine if there is enough space the right, as mentioned in #1876. This results in *-left being an available placement, even if there is zero space between the host element and the right edge of the window.
I’m also a bit confused why e.g. “top-left” is “Position the popover on top, and place the little arrow to the left”, which results in the popover being placed to the top right. However, I also understand that changing this behaviour would break a lot of code already using these placements, but I don’t think this behaviour is reflected in the API documentiation.
I’m currently working on a pull request for the Positioning service that should fix these problems.
Link to minimally-working plunker that reproduces the issue:
Version of Angular, ng-bootstrap, and Bootstrap:
Edit: Links points to the latest commit (as of this writing) instead of master
Edit2: Update ng-bootstrap 1.0.0-beta.5 -> 2.0.0