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.