The reference guide's footer scrolls the page sideways at desktop width

Open Beginner friendly
  • Is something wrong?
#1,938 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

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, html
Domain
documentation, frontend

Research direction

Read wicket.css around line 209 (the 768 px-and-up media query that applies margin-left: var(--toc-w) to #header, #content, #footnotes, #footer) and around line 388 where #footer gets max-width: none. Build wicket-user-guide with -Pguide, then in Chromium at 1280 px confirm document.documentElement.scrollWidth exceeds the window width by --toc-w before changing anything. Add a width: auto rule for body.toc2 > #footer inside that same media query and rebuild. Done when scrollWidth equals the window width at 1280 px and the footer's cloth background still spans from the table of contents to the right edge; same change then goes to wicket-11.x.

Written by the indexing model from the issue text.

Description

From 768 px up, the reference guide scrolls sideways by the width of the table of contents. At 1280 px the page is 1584 px wide, 304 px wider than the window, and the whole extra width belongs to the footer.

Cause

The Asciidoctor default stylesheet gives #header, #content, #footnotes, #footer a width: 100%. wicket.css then shifts the four of them right with margin-left: var(--toc-w) (line 209) to make room for the table of contents. #header, #content and #footnotes keep a max-width and get margin-right: auto, so they still fit. #footer has max-width: none (line 388), so it stays as wide as the window, starts --toc-w further right, and sticks out past the right edge.

Seen in Chromium on a build of wicket-user-guide with -Pguide. It is on master since #1845, and on wicket-11.x since #1937, which brought the same stylesheet over unchanged.

Not covered by #1903

#1903 fixes the 18 px sideways scroll at phone width (#1891). That is a different overflow. #1903 does not touch #footer, and below 768 px the footer has no margin, so it does not overflow there.

Fix

Let the footer take only the width the table of contents leaves, for example width: auto on body.toc2 > #footer in the same media query. It can then still run to the right edge on the cloth background. The fix goes on master first and is cherry-picked to wicket-11.x.

Done when

  • At 1280 px, document.documentElement.scrollWidth equals the window width.
  • The footer's cloth background still runs from the edge of the table of contents to the right edge of the window.
Dominant language
Java
Stars
800
Forks
423
Avg merge
1d 1h
Merged PRs (30d)
170

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 apache/wicket

All issues in apache/wicket

Similar issues

More Java issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.