themesberg / themesberg/flowbite

Multi-level dropdown is not responsive.

Open
#211 6 comments 1 reaction 1 assignee View on GitHub

@zoltanszogyenyi is already working on this.

Since Jul 14, 2022.

bug enhancement v1.6.3
Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

In the mobile example for multi-level dropdowns (and in my site), the second level of dropdown falls off the edge of the page. Since the anchor text is quite short, I don't think this is due to content. See screenshot.

To Reproduce
Steps to reproduce the behavior:

  1. In the docs, click the mobile view for https://flowbite.com/blocks/marketing/header/#header-with-dropdown-menu .

Expected behavior

With short link titles, the 2nd level of dropdown should not overflow the edge of the page on mobile, but be positioned somewhere on the page.

I'm not sure where that somewhere should be! I think this is quite a difficult design to make responsive. Some sites would show these as a collapsible vertical list nested inside the parent component in mobile.

However, it may be possible to adjust the "popper.js" placement to get the intended behaviour.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version Version 103.0.5060.114 (Official Build) (64-bit)

Additional context
Add any other context about the problem here.

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.