Skip to content

Sidenav cannot be scrolled correctly when used with Navbar #452

Open

Description

@zackchengyk

Component

Sidenav

Describe the bug

The Sidenav component cannot be scrolled correctly when used with the Navbar.

To Reproduce

  1. Use the Sidenav and Navbar together, such that the Sidenav is below the Navbar.
  2. Make sure that the Sidenav has enough children such that it can be scrolled (or just reduce your screen height).
  3. Try to scroll. You will find that the bottom-most element is partially obscured.

Cause

Sidenav's top level div element has no set height, but the nav element one level down is set to height: 100vh (code).

Screen Recording

sidenav-scroll.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions