question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with "Key Values": table of contents overlaps with page content

See original GitHub issue

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

What information was incorrect, unhelpful, or incomplete?

Information itself was OK. The page layout is just completely broken. There’s a lot of empty space on the left, whereas the page requires sideways scrolling to see the full tables, and the tables overlap with the table of contents. If it helps, I viewed it on a screen where the CSS pixel size of the window was 1368x800, and the problem seems to present itself when the screen CSS width is above 1200px.

Screen recordings of the isssue:

Scrolling down on the page

Scrolling sideways on the page

Specific section or headline?

Every section.

What did you expect to see?

A correctly formatted page

Did you test this? If so, how?

MDN Content page report details

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
caugnercommented, Mar 11, 2022

The sidebar is also missing on the KeyboardEvent: code values article:

$ grep --include='*.md' -irL 'ApiRef' files/en-us/web/api/keyboardevent        
files/en-us/web/api/keyboardevent/code/code_values/index.md
files/en-us/web/api/keyboardevent/key/key_values/index.md

Probably the reason for this is that the these two articles are “just” lists related to the KeyboardEvent, but they don’t directly document a part of the API (and are therefore not linked in KeyboardEvent sidebar). 🤔

Anyways, I created https://github.com/mdn/content/issues/13761 to track this, because adding a sidebar there doesn’t fix the reported layout problem.

1reaction
dipikabhcommented, Mar 11, 2022

As for the empty space on the left, I believe we are missing a sidebar (menu) there. (@dipikabh Is the missing sidebar here part of the issue you’re currently investigating/working on?)

Yes, it is related but not the same issue I guess. But it is definitely the same macro that generates the sidebar - the macro call seems to be missing on this page.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Table of contents header overlapping page number
Hi, I have a problem with long headings overlapping the page number in a table of contents. It doesn't look nice.
Read more >
How to Fix Web Pages That Have Overlapping Boxes
1. Add a margin if the boxes do not currently have margins and overlap by only a small amount. · 2. Search your...
Read more >
Overlapping Entries on Contents Page - LaTeX Stack Exchange
I have been trying to get the solution by Jean Mentz to work, it's nearly there but I can't seem to get the...
Read more >
How to fix a footer overlapping content? - html - Stack Overflow
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no...
Read more >
Why does my header overlap with my content?
I am using page events to create a header that consists of a table. This table is added to each page in my...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found