Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

bug (parser function): `height` in vh breaks the canvas

Closed Beginner friendly
#108 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, javascript
Domain
frontend, web-dev

Research direction

The height and width are set in resources/KnowledgeGraph.js around lines 1074-1079, both on the wrapper and on the vis-network options. Start by reading that block to see which value reaches vis-network, then reproduce with a 75vh height on a graph page. Done means the canvas fills the wrapper for vh values, with the wrapper as the only place the size is set, and the existing px and % cases still render.

Written by the indexing model from the issue text.

Description

height is set on the wrapper and also passed to vis-network, which only accepts px and %. With 75vh the wrapper is 75vh, the canvas falls back to 150px and the rest is cut off.

Suggestion: set height/width on the wrapper only, pass 100% to vis-network.

Workaround: .KnowledgeGraph .vis-network { height: 100% !important; }

https://github.com/SemanticMediaWiki/KnowledgeGraph/blob/32c6e98bafea0fab2e13d9cf8402e0358a4f504c/resources/KnowledgeGraph.js#L1074-L1079

Dominant language
JavaScript
Stars
5
Forks
5
Avg merge
6m
Merged PRs (30d)
4

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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 SemanticMediaWiki/KnowledgeGraph

All issues in SemanticMediaWiki/KnowledgeGraph

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.