primefaces / primefaces/primereact

ScrollPanel scrollbar calculations are incorrect

Open
#8,440 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

When content exceeds a certain size in either the horizontal or vertical axis, the scroll bar calculation becomes incorrect and overflows the component boundaries at 100%.

Reproducer

https://gitlab.com/stackhound/primereact-scrollpanel-bug

System Information
System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900KF
    Memory: 26.06 GB / 31.26 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.17.0 - /home/nrhruch/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - /home/nrhruch/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.11.0 - /home/nrhruch/.local/share/pnpm/pnpm
  npmPackages:
    primereact: ^10.9.7 => 10.9.7 
    react: ^19.2.0 => 19.2.3
Steps to reproduce the behavior

I have it in a gitlab project right now. You can clone and run it. Toggle between small and large content to see the issue.

Expected behavior

The scrollbars should calculate its position correctly regardless of content size.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone and run the linked GitLab reproducer, then use its small and large content toggle to observe the ScrollPanel scrollbar calculations on both axes. Trace the ScrollPanel entry point involved in the overflow and verify the fix by confirming that the scrollbars remain within the component boundaries at 100% regardless of content size.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.