ngbDropdownMenu wrong position on small device in navbar

[mebibou]

Bug description:

When using a ngbDropdownMenu inside a navbar, opening the menu on a large device will make it render as position: absolute and will display below the opening button. But when reducing the screen and the dropdown should appear in the hamburger menu, when opening it is still displayed using position: absolute which makes the menu look weird (not taking the full width).
Note: this issue does NOT happen on 4.0.2 but does on 4.0.3. On 4.0.2 the position is not overridden by the library and it works. 4.0.3 is somehow adding position: absolute which is completely unnecessary and breaks the layout

Link to minimally-working StackBlitz that reproduces the issue:

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

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.0

ng-bootstrap: 4.0.3

Bootstrap: 4.2.0

[ghost]

In Bootstrap Dropdown JS adds position and transform properties to .dropdown-menu. But when Dropdown is in a Navbar, it does not add anything.

See https://github.com/twbs/bootstrap/blob/master/js/src/dropdown.js#L147 they do not use Popper.js when Dropdown is in Navbar. ng-bootstrap should do the same.

[ahmadmu]

I'm not sure it's related, but I'm currently having an issue where in dev mode the ngbDropdownMenu is positioned using top: 38px, and in prod mode it's positioned using transform: translate(0, 38px), which is breaking my animations in production. Does someone know what might be the cause?