Override popover's inline transform: translate() function's x-value

I have an issue in positioning of popover. When I click on trigger button, it sets the transform: translate(x, y) using inline CSS. As displayed in the GIF below, y-value is set as required. But, for x-value, it is unnecessarily going inside the left panel. I want to override x-value with 0 and also want to set the popover arrow relevant to the trigger button and not at center.

Angular: 8.2.14

Bootstrap: 4.3.1

ng-bootstrap: 5.3.0

[benouat]

But it has lagging transform animation which first time aligns it at the top

First time I see this kind of bug. We need to figure out what’s going on here.

I am also facing issues in nested popover

I know it’s not always doable, but I would strongly suggest not to use this pattern! It’s bad in terms of UX and can lead to a lot of nasty side-effects as you can notice.

Did you also try `[container]=“‘body’” as I suggested ? For the nested situation, I think you would be forced to use it.

[benouat]

Hey @Gourav102

Can you tell me which placement are you using ? Playing with it might solve your issue. You can also have a look at container and specify [container]="'body'", hence the popover will be displayed on top of your panels.