Ngx-bootstrap: Popover used in element that has scroll

[anil-kk]

please check last section of issue demo.
popover is not behaving as expected when used inside an element with overflowed content that is having scroll.

Probably popover and scroll at window level are working as expected.

Issue Preview
Issue Editor

[IlyaSurmay]

Elements like popovers, tooltips, and dropdowns are attached to the parent element and positioned absolutely (relatively to the closest parent with relative, absolute or fixed position), so to fix this scroll issue, you need to wrap your button with popover into a div with position: relative
Check this example, there are two popovers, one in a div with position: relative - https://stackblitz.com/edit/ngx-bootstrap-datetime-vffkcn?file=app/app.component.html

[weijyewang]

@IlyaSurmay Thanks. You save me hours of debugging!

[kamalSaiDd]

It's hacky though, But i got it working by adding following code to my scroll-container where i set overflow-y.

.html = (scroll)="onScrollForPopOver($event)"
.ts = onScrollForPopOver($event) { // no more code needed just plain open close .}

It works magically.
I think ngb-popover needs scroll() function to be fired

[yangfan0356]

It's hacky though, But i got it working by adding following code to my scroll-container where i set overflow-y.

.html = (scroll)="onScrollForPopOver($event)"
.ts = onScrollForPopOver($event) { // no more code needed just plain open close .}

It works magically.
I think ngb-popover needs scroll() function to be fired

Thanks a lot!! In my case, it works on Popover with [adaptivePosition]="true", container="body" and ng-template case.

[PrashantSinghGour]

@yangfan0356 @kamalSaiDd on html i'm getting build error saying 'Directive ɵc, Expected 2 arguments, but got 1.'