google / google/material-design-lite

MDL components page on mobile devices

Open
#5,014 0 comments 3 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

MDL looks neat and seems pretty comprehensive, but:

1. The site's [components documentation pages](https://getmdl.io/components/index.html) are unusable in landscape mode from a mobile device (Nexus 5). Because of the choice of navigation display, the visible area shows practically nothing of the underlying content.
1. The same components pages in portrait mode also requires horizontal scrolling for all of the main content in Chrome for Android. It often looks like a web page designed for a desktop but rendered on a mobile device.
1. Changing the view width on desktop Chrome switches to the mobile view around 850px, but then the content at the page bottom is no longer visible. For instance, on the "chips" page below 850px, the last line I see is the entry for "mdl-chip__action" under the CSS classes section, but there's plenty more after that. The rest of the content is below the visible area and I can't scroll to it. Same problem on the layout page, so it's not an isolated case.

This is the first exposure to MDL that prospective users see, so I think these site issues are pretty important to fix.

Contributor guide

Open the contributing guide

Research direction

Start with the components documentation pages, especially the chips and layout pages linked in the report, and inspect their mobile navigation and content sizing around 850px. Verify the pages in landscape and portrait Chrome for Android and desktop responsive mode. Done means the main content is fully visible and scrollable without unwanted horizontal overflow at the reported widths.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.