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

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)

https://valor-software.com/ngx-bootstrap

MIT License

5.53k stars 1.69k forks source link

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

Open xoneill opened 5 years ago

xoneill commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

It will look like Peek 2019-05-21 13-04 Is it what you expect?

jlhergar commented 5 years ago

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 commented 5 years ago

@jlhergar Follow our new versions bumps in the Slack channel

jlhergar commented 5 years ago

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 commented 5 years ago

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

jlhergar commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

tsathis commented 4 years ago

Any update on this?

JKingas commented 2 years ago

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.

NKisiura commented 3 days ago

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.

Thanks, pal! That worked perfectly for me.