Popover Positioning is wrong when container is set to "body" but parent element has scroll

[xoneill]

trafficstars

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

https://stackblitz.com/edit/ngx-bootstrap-popover-cih566

[ludmilanesvitiy]

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]

It will look like Is it what you expect?

[jlhergar]

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

[ludmilanesvitiy]

@jlhergar Follow our new versions bumps in the Slack channel

[jlhergar]

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.

[ludmilanesvitiy]

What do you mean by " the position is not correct." What are your expectations?

[jlhergar]

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.

[1-0-1]

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]

@jlhergar If you can live with scrollbars, setting [adaptivePosition]="false" and overflow-y: scroll; works around this issue.

[tsathis]

Any update on this?

[JKingas]

I found about where the issue is. The popover was "hitting" the top of the container and breaking the positioning. The solution was related to bs-datepicker and popover on the same page in an overflow container. When the datepicker opens its popup and the popover was open before that, the popover was positioned normally in the overflow container as long as it was still open.

I compared datepicker and popover, both components use the same PositioningService and as a result this is what you can do in your project, but you need ngx-bootstrap 5.x.x+:

• You need to set modifiers.preventOverflow.enabled to false when popover is shown. But you will need to setOptions completely.
  • For example like this: https://stackblitz.com/edit/ngx-bootstrap-popover-hmqnhk?file=src/app/ngx-bootstrap/ngx-bootstrap.component.ts

Maybe in the future someone will add such option for popover directive or other solution in ngx-bootstrap. If I have time I'll think about it myself. Issue still exists in ngx-bootstrap until 8.0.0.