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

[2-5]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] 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

[mdo]

@GeoSot Thoughts on when to tackle this? For now I've pulled it from v5.2.1.

[GeoSot]

I am willing handling it at #35901

[RandScullard]

We just upgraded from Bootstrap 5.1.3 to 5.2.1 and this Popper warning started appearing. We are using margin to offset a dropdown inside our Bootstrap navbar. Apparently we can't use Popper's suggested offset solution because dropdowns in a navbar don't use Popper. It seems that at the moment, there is no solution for this warning in the context of a navbar dropdown.

[sandorduba]

I started to experience some issues with Dropdown menu items in bootstrap. Sometimes it works, and sometimes it is not working :(

Then I upgraded bootstrap and started to look into what was going on. Finally, I replaced bootstrap and Popper min.js files with *.js imports and I see this warning too when it is not working.

    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",

How should I solve this?

I'm using [email protected]

I'm not worrying about the warning, but the navbar is broken at the moment :'(

[billhance]

I solved this by adding mt-0 to the dropdown-menu element.

[bazineta]

@billhance Clever hack, certainly silences the warning here as well.

[pistvan]

I added this after including Bootstrap:

.dropdown-menu[data-bs-popper] {
    top: calc(100% + var(--#{$prefix}dropdown-spacer));
    margin-top: 0;

    .dropup & {
        bottom: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-bottom: 0;
    }

    .dropend & {
        left: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-left: 0;
    }

    .dropstart & {
        right: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-right: 0;
    }
}

[davideluque]

The warning is still present in v5.2.3. Bill's comment does silence the warning:

I solved this by adding mt-0 to the dropdown-menu element.