p-dropdown causes page to horizontally scroll

[rosenthalj]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://primeng-dropdown-demo-vx9kqt.stackblitz.io

Current behavior
In a page that has a horizontal scroll bar and an option has previously been selected, when a dropdown is clicked the page will automatically scroll. This is new and undesirable behavior

The bug was induced in primeng v12.2.2. The bug is in primeng v13.x

Issue: #10976 was closed because it was not clearly described. Hopefully this new issue provides clarity. I'm assuming the proposed solution in issue #10976 will fix this issue. From MrPollux issue report:

primeng/src/app/components/dropdown/dropdown.ts

Line 697 in 0fcf981

selectedListItem.scrollIntoView({ block: 'nearest', inline: 'start' });

selectedListItem.scrollIntoView({ block: 'nearest' }); // does not create this problem

Version 12.2.1 did not have this problem.

Expected behavior
No scrolling.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/primeng-dropdown-demo-vx9kqt?file=src%2Fapp%2Fapp.component.html
A simple modification to the primeng "single" dropdown demo. I just added a div to insure that a horizontal scroll bar would be present.

• Angular version: 13.X

• PrimeNG version: 13.X

• Browser: all

• Language: all

• Node (for AoT issues): node --version =

[eduardtyutyunik]

Hi. Sorry, but it doesn't really fixed the issue. If you put the dropdown to the right half of the page. In your example:
<p-dropdown [options]="cities" [(ngModel)]="selectedCity1" placeholder="Select a City" optionLabel="name"
[showClear]="true" style="margin-left: 300px;">
then the horizontal scroll also happens. The same problem is in the paginator of tables. If the page has a horizontal scroll and the padinator of the table is on the right half of the page, the page scrolls horizontally when the paginator will be oppend.

[waratah]

if you get this issue, use appendTo='body' to work around the bug.

[olechka-dev]

I'm using version 13.2.0 and appendTo="body" doesn't help to overcome the issue. The page is scrolled to the left when dropdown is opened

[wojo2020]

Same here. I am using 13.4.1 and am still getting the horizontal scrolling behavior bug. My dropdown is in the right half of the screen. It seems to not jump when I place the dropdown in the left half.

[prodeep-c]

For 13.4.1 p-dropdown appendTo="body" fixed my problem. Thanks

[jamesgade]

Put appendTo="self" in the dropdown and override the CSS of p-dropdown-panel,

position: absolute; (will be by default)
left: unset !important;
right: 0:

[caitlinrouille]

Any update on this issue? Nothing I do with appendTo works for this issue when there is a scroll.

[p-gaspar]

I was able to overcome this issue by setting [virtualScroll]="true" on the p-dropdown, and also setting a min-width on the dropdown panel:

[panelStyle]="{ 'min-width': 'min(100vw, 250px)' }"

I'm using primeng@14.1.2

Edit:
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.

[Chinnadurai312]

1. I am facing the same issue on clicking the paginator dropdown on primeng p-table. Primeng version used 15.1.0. Do we have any solution.

2. Also the same issue in some of the p-dropdown, tried above mentioned solutions. None of them worked. Can anyone help.

[mehulk-ba]

1. I am facing the same issue on clicking the paginator dropdown on primeng p-table. Primeng version used 15.1.0. Do we have any solution.
2. Also the same issue in some of the p-dropdown, tried above mentioned solutions. None of them worked. Can anyone help.

Hi , did you find the solution for this issue? Please help

[eduardtyutyunik]

look here #11046
p-dropdown -> appendTo='body'
p-table -> paginatorDropdownAppendTo='body'
this works for me.

[carcigenicate]

For me, the only fix here that "worked" was [virtualScroll]="true", and that's not a very desirable fix since that causes other problems.

In my case, this issue was caused by a Bootstrap interaction, somehow. I'm still now sure how opening the dropdown triggered it though.

I had the p-dropdown inside of a Bootstrap row (<div class="row">...</div>). For some reason, opening the dropdown caused the negative margin gutters row adds to shift the page. The fix was to remove those gutters using g-0:

<div class="row g-0">
    . . .
</div>