Sửa lỗi "CSS margin styles cannot be used to apply padding" khi sử dụng dropdown của Bootstrap

Khi sử dụng dropdown của Bootstrap, có lúc chúng ta sẽ thấy ở console của trình duyệt xuất hiện một đoạn warning như sau:

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.

Thật ra cũng không ảnh hưởng mấy, nhưng nếu chúng ta muốn fix lỗi trên để cho console nhìn sạch sẽ hơn thì làm như bài viết này nhé.

Khái quát

Trong Bootstrap, popper là một thành phần của thư viện Popper.js, một công cụ hỗ trợ việc xác định vị trí của một phần tử trong trang web.

CSS margin là một thuộc tính cho phép bạn đặt lề cho một phần tử HTML bằng cách xác định khoảng cách giữa phần tử đó và phần tử khác trong trang. Tuy nhiên, trong Popper.js, bạn không thể sử dụng thuộc tính margin để đặt lề giữa popper và phần tử tham chiếu hoặc giới hạn của nó.

Để tạo hiệu ứng tương tự như margin, bạn có thể sử dụng sửa đổi offset cùng với tùy chọn padding trong các sửa đổi preventOverflow và flip.

Cách fix

Nói dài dòng vậy thôi chứ cách fix rất đơn giản:

1
2
3
.dropdown-menu {
  margin: 0 !important;
}