google / google/material-design-lite
MDL components page on mobile devices
- 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
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