BootstrapのDropdownコンポーネントを使うと「Popper: CSS "margin" styles cannot be used...」と警告が表示される

概要

bootstrapのdropdownを使うと、以下の警告がconsoleに表示される。

console.log

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.

情報

• 「この警告は仕様」らしいので変更される可能性は低い。

警告を表示されない様にするには

• cssでmarginの指定をやめる
• 新たにdropdown-spacerを作ってmargin => heightに設定する

css

.dropdown-menu {
-  margin-top: var(--bs-dropdown-spacer); /* bs のデフォルト */
+  margin-top: 0;
}

+.dropdown-spacer{
+    height: var(--bs-dropdown-spacer);
+}

html

<div class="dropdown">
  <button
    class="btn dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    data-bs-display="static"
    aria-expanded="false"
  >
    <i class="bi bi-three-dots-vertical fs-4"></i>
  </button>

   <div class="dropdown-menu">

+   <div class="dropdown-spacer"></div>

    <button class="dropdwon-item">アイテム1</button>

    <a class="drapdown-item">アイテム2</a>
  </div>

</div>

参考

了