Height calculation problem on 4K display

Open
#846 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Start with the attached embeddingtimeline.txt and reproduce the issue in the embedded timeline.js example on a 4K display or tall browser window. Compare the initial height calculation with the result after the reported delayed resize event, focusing on the top portion and clipped decade labels. Done means the timeline renders at the correct height on initial load without requiring a resize.

Written by the indexing model from the issue text.

Description

I am using an embedding a timeline into my own html wrapper page. The timeline.js code miscalculates the height of the timeline at the bottom of the screen; it is too tall. A resize event causes the correct height to be calculated. If the browser window is not full screen then this seems to only happen once it is at or above a certain height. The symptom is that the once-every-ten-year year values are cut off - their bottoms are beyond the bottom edge of the div.

Attached is screen shot showing the problem. I added padding to the body element so this is easier to see and to make it clear that the body element is not taller than the window size. I have also attached my html file (as a txt file) in case it helps. Note that I trigger a resize event after 1.5 seconds and this causes a recalculation that seems to work correctly.

bug

embeddingtimeline.txt

debugged

Now that I've tested this a little more, it appears to be the top portion and not the timeline whose height is calculated wrong. That means I can't just force the timeline to be a specific height to fix this; I'll need to do something else, if anything can be done to fix it.

Dominant language
JavaScript
Stars
3.2k
Forks
645
No merged PRs in 30d

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.

More from NUKnightLab/TimelineJS3

All issues in NUKnightLab/TimelineJS3

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.