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

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

ByYuto 13/10/2024 19:36
2min read

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...

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 preventOverflowflip.

Cách fix

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

css
Copy
1
2
3
.dropdown-menu {
  margin: 0 !important;
}
Đánh giá bài viết: 4.9/5 (28 đánh giá)
Bạn chưa đánh giá

Bình luận

Author
hoclaptrinh.io author
Tác giả:Yuto Yasunaga

Mình là một full stack developer, tốt nghiệp và làm việc tại Nhật Bản. Trang web này là nơi mình tổng hợp, đúc kết và lưu trữ lại những kiến thức trong quá trình học và làm việc liên quan đến IT.
Hy vọng những bài viết ở website này sẽ có ích cho bạn.