Dropdown uses only the first specified placement.

[kirilmitev]

Bug description:

In the Stackblitz example there is a dropdown in the top-left corner of the screen.
The HTML body is set to "overflow: hidden".
The placement of the Dropdown is specified as "top bottom".
Since there is no space over the dropdown, I would expect that the "bottom" placement is used.
Instead the "top" placement is used.

A little digging through the @ng-bootstrap code led me to the positionElements() function in the "positioning.ts" file. Just for clarity, there are two such functions, one of which answers the question: "Does the menu with a given placement fit in the viewport, or not?". Now the problem I stumbled upon is that the BCR (Bounding Client Rect) is not yet initialized, when the check for the first placement is made and the function always returns true.

return targetElBCR.left >= 0 && targetElBCR.top >= 0 && targetElBCR.right <= windowWidth && targetElBCR.bottom <= windowHeight;

always returns true on the first check, because targetElBCR looks like this:

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 }

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-2xpppu

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.2.8

ng-bootstrap: 4.1.0

Bootstrap: 4.3.1

[fbasso]

Thanks for the issue and investigation @kirilmitev !

To complete your inputs, the getBoundingClientRect returns 0 values because the dropdown-menu doesn't have the 'show' class yet, ie the dom element is not visible yet at the time of the positioning.

[fbasso]

Please note that in your StackBlitz, 'bottom-left' will be necessary even after a fix, as 'bottom' aligns the centers of the button and the menu, so this one is still outside the viewport in this placement.