twbs / twbs/bootstrap

Issues with the nav-overflow component after the latest fix

Open
#42,845 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v6
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Prerequisites
Describe the issue

After the fix in PR #42814, I tested it and found the following new issues.

  1. When only the icon is kept, the icon does not seem to be perfectly vertically centered; the space above it feels larger than the space below it.
Image

Expected behavior: When only the icon button is kept, the icon should be perfectly vertically centered.

  1. When the page is refreshed while already in the collapsed state, there is a flicker.

Steps to reproduce: Press F12, open the console, press Ctrl + Shift + M, reduce the width, and press F5 to refresh the page.

https://github.com/user-attachments/assets/a216235f-f11e-46d5-998d-74cfa776a5ec

The flickering even triggered the scrollbar:
Image

When I add the following styles, the scrollbar no longer appears:

<style>
      .nav-overflow {
        overflow: hidden;
      }
    </style>

https://github.com/user-attachments/assets/df44c3fd-0e85-468e-928b-05cb002aa1d9

Although the scrollbar no longer appears, the flickering issue still persists.

Reduced test cases

Reproduction code:

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/twbs/bootstrap@4bacc48b71e786292d980ab6214ac93a450dfb05/dist/css/bootstrap.min.css"
    />
  </head>
  <body class="p-2">
    <div class="container">
      <div class="nav-overflow">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Analytics</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
          </li>
        </ul>
      </div>
    </div>

    <script type="module">
      import { NavOverflow } from "https://cdn.jsdelivr.net/gh/twbs/bootstrap@4bacc48b71e786292d980ab6214ac93a450dfb05/dist/js/bootstrap.bundle.min.js";
      const navElement = document.querySelector(".nav-overflow");

      const navOverflow = new NavOverflow(navElement, {
        collapseBelow: "md",
        moreText: false,
        threshold: 2,
        moreIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>
        `,
      });
    </script>
  </body>
</html>
What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v6-dev

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.

Research direction

Start with the NavOverflow entry point in the reduced HTML test case and compare the behavior introduced by PR #42814. Reproduce the icon-only alignment and collapsed-state refresh cases in Chrome, then verify that the icon is centered and the flicker and unintended scrollbar are gone.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.