I have 2 dropdowns in Datatables to fiter the content and i've got a bug. When a dropdown on the right side of the page, it shifts the page to the left by about 10px. And in the opposite case when dropdown on the left it shifts page to the right. With first Click happens nothig, but only when i try to change the selected value.
<p-dropdown
id="ListFilter_priority_dropdown"
inputId="ListFilter_priority_dropdown_input" #priorityDropdown
styleClass="my-form-control" [options]="prioritySelectItems"
[showClear]="true" placeholder="Select"
(onChange)="filter($event.value)" appendTo="body"> <ng-template
let-option pTemplate="item"> <div
id="ListFilter_priority_item_container"> <span
id="ListFilter_priority_dropDown_{{option.label}}">{{option.label}}</span>
</div> </ng-template> </p-dropdown>
Angular v 13.3.8 PrimeNG version 13.4.1 Build / Runtime - Angular CLI App
I have already tried to play around the position of the "body" - absolute, static, relative and s.o. but it doesn't work aswell as changing the property "appendTo" of dropdown.
This seems like an unresolved bug with the p-dropdown component of PrimeNG. Other people are having this issue:
https://github.com/primefaces/primeng/issues/10992
https://github.com/primefaces/primeng/issues/11046
However, I was able to overcome the problem in PrimeNG 14.1.2 by adding [virtualScroll]="true" to the p-dropdown component, and also adding a min-width to the dropdown panel with the property [panelStyle]="{ 'min-width': 'min(100vw, 250px)' }"
Another situation that may be causing this is if you're using appendTo="body" and the body has overflow: hidden or overflow-x: hidden but has horizontally overflowing children.
If you're using appendTo="body", try setting the overflow to auto and check if you have a horizontal scrollbar.
If you do, this may be causing the problem. To fix this, either take care of the overflowing children, or set overflow: hidden/overflow-x: hidden on a child element of the body.