Dropdown missplaced since 2.20.1 with appendTo

Since 2.20.1, the dropdown is missplaced when i used: appendTo=“body”.

==> I use something like that: <ng-select [items]="articleFamillyList" bindLabel="label" bindValue="code" appendTo="body" formControlName="familly" [searchFn]="refObjectSearchFn" placeholder="--- Select a familly ---"> <ng-template ng-label-tmp let-item="item"> {{ item.code }} - {{ item.label }} </ng-template> <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm"> <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.label }}</span> </ng-template> </ng-select>

Exemples: Version: 2.20.1 (the dropdown not perfectly align, but less than in my app) https://stackblitz.com/edit/angular-6bsddn

Version: 2.19.0 (the dropwn down is perfectly align) https://stackblitz.com/edit/angular-8umxey

[ahadjithoma]

@stephanecot did you find any solution? I am also using appentTo="body" and body {position:relative} in my styles but it doesn’t work. In my case it seems that the position is correct when the page has scroll bar

[oliverguenther]

This is connected to the body or append to wrapper being 100% in height. When the dropdown is inserted, it’s initial height is 2px and causes the window to grow, in our case resulting in a scrollbar to be visible for a short period of time.

That shifts the entire content to the left, causing this offset.

Here’s an example that causes the dropdown to be moved to the left by the width of the scrollbar (which in stackblitz is narrow):

https://stackblitz.com/edit/angular-fzmu56?file=src/app/app.component.html

We can force the reposition using the private method _updatePosition as a workaround, which demonstrates that the position is actually correct with the current parent, but was shifted temporarily by the scrollbar (delayed in the gif by 2 seconds for dramatic effect)