arunghosh / arunghosh/react-heatmap-grid

ylabels follow scroll because it is absolute

Open
#199 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
82
Forks
40
PR merge metrics
No merged PRs in 30d

Description

If you include react-heatmap-grid inside a div with long height that is overflow-y-scroll, the ylabels follow scroll.
I tried changing the css inside chrome developer mode from

style="position: absolute; text-align: right; padding-right: 5px; padding-top: 13.5135px; width: 200px;"

to

style="position: static; text-align: right; padding-right: 5px; padding-top: 13.5135px; width: 200px;"

and it seemed to work. Is there any reason you guys set it to position: absolute for the ylabels' div?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the ylabels div in the component and reproduce the issue with react-heatmap-grid inside a tall div using overflow-y-scroll. Compare the current absolute positioning with the reported static-position behavior, and verify that ylabels no longer follow the container's scroll while the heatmap layout remains intact.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.