Ngx-bootstrap: Popover Positioning is wrong when container is set to "body" but parent element has scroll
I am having trouble after updating from 3.x.x to 4.x.x version.
My case is pretty simple: button which triggers Popover is inside a container which has overflow-y: auto; I changed Popover's container to body
Please take a look on example below. In version 3.x.x both buttons work exactly the same
xoneill
All 10 comments
In the next ngx-bootstrap version, you'll be able to set [adaptivePosition]="false" param to use the previous positioning of popover, as was in 3.x.x version.
https://github.com/valor-software/ngx-bootstrap/pull/5183
ludmilanesvitiy
on 21 May 2019
It will look like
Is it what you expect?
ludmilanesvitiy
on 21 May 2019
I have the same issue.
When is the new version expected to be published?
I have verified that in 4.x.x versions the calculation of the position of the popover is much better adjusted than in 3.x.x, versions, including cases with auto positioning. Except for the problem indicated by xoneill, the rest is very satisfactory. Is not there a solution to this problem that allows to maintain the optimizations of the latest version?
Thank you
jlhergar
on 21 May 2019
@jlhergar Follow our new versions bumps in the Slack channel
ludmilanesvitiy
on 21 May 2019
I have created an example with several cases after updating to version 4.3.0
https://stackblitz.com/edit/ngx-bootstrap-popover-parent-scroll
With elements located on the right of the screen the position is not correct.
jlhergar
on 22 May 2019
What do you mean by " the position is not correct." What are your expectations?
ludmilanesvitiy
on 22 May 2019
I need a behavior like the one seen in the attached image (case Not scroll - adaptative true - auto), but cases with scroll:
I attach another image with incorrect positioning (case Scroll - Adaptative true - auto):
And other image with incorrect positioning (case Scroll - Adaptative false - auto):
Checking ngx-popover-positioning.js I think that in the getBoundaries method I would need a control when looking for the parent node with scroll, so consider if the popover has been added to the body. Currently I think that this does not take into account and when the method finds an element with scroll it gives preference, but if you have chosen that the popover be added to the body, it should have the preference.
jlhergar
on 22 May 2019
There sure are a lot of issues with using container body. It doesn't work with dynamic content templates and with scrolling. Typeahead in 5.x also has an issue. Before I start stepping back version to version, does anyone happen to know the last version this was working?
Found it in another thread. I need to go back to 3.2.0. ...and that won't work with Angular 8.
1-0-1
on 9 Jul 2019
@jlhergar If you can live with scrollbars, setting [adaptivePosition]="false" and overflow-y: scroll; works around this issue.
1-0-1
on 9 Jul 2019
Any update on this?
tharindusathis
on 4 Sep 2020
Related issues
haisaco
路
3Comments
RolfVeinoeSorensen
路
3Comments
hugonne
路
3Comments
phmello
路
3Comments
MrBlaise
路
3Comments
Most helpful comment
I need a behavior like the one seen in the attached image (case Not scroll - adaptative true - auto), but cases with scroll:
I attach another image with incorrect positioning (case Scroll - Adaptative true - auto):
And other image with incorrect positioning (case Scroll - Adaptative false - auto):
Checking ngx-popover-positioning.js I think that in the getBoundaries method I would need a control when looking for the parent node with scroll, so consider if the popover has been added to the body. Currently I think that this does not take into account and when the method finds an element with scroll it gives preference, but if you have chosen that the popover be added to the body, it should have the preference.