Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #36789
Closed
Open
Issue created Jul 20, 2022 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Popper warning regarding .dropdown-menu margin usage when data-bs-display="static"

Created by: 2-5

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems
  • I have read the contributing guidelines

Describe the issue

Popper 2.11.5 issues a warning in the browser console each time I open a dropdown which has data-bs-display="static"

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the offset modifier, as well as the padding option in the preventOverflow and flip modifiers.

It seems to be caused by the use of margin-top on .dropdown-menu, if I disable that rule in the browser inspector Popper doesn't warn anymore:

.dropdown-menu {
  &[data-bs-popper] {
    margin-top: var(--#{$prefix}dropdown-spacer);
  }
}

Reduced test cases

Click button and watch browser console:

https://codepen.io/costka/pen/GRxmqyV

!!! Warning only appears when using non-minimized version of Popper, the minimized one removes console logging.

What operating system(s) are you seeing the problem on?

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.0, Popper.js 2.11.5

Assignee
Assign to
Time tracking