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

Created on 8 Nov 2017 · 7Comments · Source: valor-software/ngx-bootstrap

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

comp(dropdown) comp(positioning) issue medium

Source

ashley-hunter

👍6

Most helpful comment

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

ghamry on 2 Jan 2019

👍4

All 7 comments

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.

atiris on 13 Nov 2017

Same / similar issue can happen with tooltip.

1-0-1 on 17 Nov 2017

👍3

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

valorkin on 7 Dec 2017

👍3

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

ghamry on 2 Jan 2019

👍4

Same for me for dropdown.

ismcagdas on 9 Aug 2019

Still occurring for me too

harveysingh1 on 13 Jan 2020

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.