“auto” and secondary placement of popovers is incorrectly determined


#1896: ngbTooltip placement issue when inside other text
#1876: Typeahead availability of placement ‘bottom-left’ or ‘top-left’ is dismissed by height, not width

Bug description:

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:

Old, angular 4.4.4, ng-bootstrap 1.0.0-beta.5
New angular 6.0.0, ng-bootstrap 2.0.0

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.0

ng-bootstrap: 2.0.0

Bootstrap: 4.0.0

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

1 possible answer(s) on ““auto” and secondary placement of popovers is incorrectly determined