fix(dropdown): dropdown does not take into account page boundaries

[ashley-hunter]

Bug description or feature request:

If I have a button on the top right of the page which opens a dropdown, the dropdown opens but appears largely off screen. The dropdown should instead be shifted so that it is fully visible. Note, using placement option also does not correct this.

Plunker/StackBlitz that reproduces the issue:

https://stackblitz.com/edit/ngx-bootstrap-f3spbf?file=app/app.component.html

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 1.9.3

Angular: 4.4.6

Bootstrap: 3.3.6

Build system: Angular CLI, System.js, webpack, starter seed:

CLI, Webpack & SystemJS

[atiris]

It is possible to create directive for dropdown (like dropdownVisible="viewport|body|false") which calculate absolute position of bs-dropdown-container to avoid display out of target container? (if it is container="body"), So, if height of dropdown-container + calculated position is more than body height, move dropdown-container up. The same approach for dropdown too much left, right, or top according to page body|viewport.

[1-0-1]

Same / similar issue can happen with tooltip.

[valorkin]

Its not dropdown issue, its possitioning issue
Bs3 and 4 are using different positioning approach
So ... it will be rewritten :)

[ghamry]

i'm using "ngx-bootstrap/popover", "version": "3.1.3"
bootstrap css version 4.2.1
and the problem still exists

[ismcagdas]

Same for me for dropdown.

[harveylx]

Still occurring for me too

[Hagith]

As @valorkin mentioned, positioning engine needs some additional work to handle such cases properly.
But, IMHO, instead of fixing or rewriting positioning engine, which can consume significant amount of time, we can simply use popper.js which "just works™".
Bootstrap itself is using it, vue-bootstrap is using it, why we shouldn't use it? :)

I created simple wrapper for popper which you can check here: https://stackblitz.com/edit/angular-msq1rb
Source code is also published as a gist: https://gist.github.com/Hagith/eab5f5c547b6fa852c789011b8cf08db

If you like it, I can spent some time to deliver it as PR.