Menu does not have space between container and viewport when overflowing

Open
#5,613 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
scss
Domain
frontend

Research direction

Reproduce the menu overflow with enough menu items to extend beyond the viewport, using the screenshots as the expected behavior reference. Inspect the menu component's overflow and positioning entry points, then verify that the menu scrolls internally and retains visible space from the viewport edge.

Written by the indexing model from the issue text.

Description

Description

Hi!

Love the new material components!
Runs nicely alongside Vue3, without the need for any complicated adapters.

I've got a slight issue with the menu though.

A menu with lots of menu-items run of page.
It suggests that the user has to scroll the viewport to view all of the available options (as seen below)

Scherm­afbeelding 2024-05-09 om 09 26 45

Creating an extra margin between the menu and the border of the viewport would imho help the user experience. This would indicate that the user should scroll the menu instead of the viewport.

Scherm­afbeelding 2024-05-09 om 09 28 01

kind regards,

Marco

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Contributor guide

Open the contributing guide

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 material-components/material-web

All issues in material-components/material-web

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.