Popover positioning and sizing incorrect when inside of navbar with dynamic HTML content

[dmi3lab]

Bug description:

1. Position of a popover incorrectly calculated.
2. Position and size of a popover changes on click on the window.

Popover is placed inside of navbar and has a dynamic HTML content.

The issue appears to be related to popover's width changes due to dynamic nature of the content. Looks that ngbPopover calculates positioning before the internal content is fully displayed. And of course IE11/Edge acts differently.

IE11/Edge:

Behavior: no changes when clicking

Chrome/Firefox:

Behavior: After several clicks anywhere in the window the popover moves toward the right place. But still arrow is not completely centered as mentioned here: #2089

I have noticed that when the width is set explicitly such as
<div class="row no-gutters" style="width: 194px;">
then it looks more as expected but this doesn't seam to be a good solution when content is dynamic.

3. Another thing I have noticed that might be related to the same issue is position changes on resizing window:
   

Link to minimally-working plunker that reproduces the issue:

https://stackblitz.com/edit/angular-ipuuur

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.10

ng-bootstrap: 1.1.2

Bootstrap: 4.1.0

[Arackow]

I have the same issue. Mine is just a simple line of text that has different sizes... for my specific use case I can probably just get away with using a fixed width but the solution is probably something to the effect of creating but not rendering the content, measure it, move the popover accordingly, then render...

[yaitskov]

Explicit style value bothers me also.
It is not even needed. If I disable left property layout fixes itself.

[maxokorokov]

This should be fixed in 4.0.3, but please see this → #2972 (comment). Feel free to reopen if you're still having issues.