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 [email protected]

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>

[rolandrybka-circeo]

I've found out that when you open and close the dropdown, a new div is added after the p-overlay element which position is out of the dropdown's parent client area. So if the parent can overflow, the scrollbars appear. With css I've hidden this new element, which looks like this btw:
<div class="ng-tns-c23-6 p-overlay p-component ng-star-inserted" ng-reflect-ng-class="[object Object]" style="min-width: 472px; transform-origin: center top; top: 310px; left: 709px;"><!--bindings={ "ng-reflect-ng-if": "false" }--></div>
As you can see the left position is a bit odd.
Given this style to the dropdown:
p-dropdown p-overlay + div.p-overlay { display: none; }
fixed the issue for me.