Topic: Incorrect Behavior with Positioning on Buttons

sigalph premium asked 3 years ago

Expected behavior When button is clicked, the number bubble - demonstrating the position - on the button should remain.

Actual behavior When clicked, the positioned element is hidden except the portion displayed within the bounds of the button.

Resources (screenshots, code snippets etc.) See the page and look at the Additional examples section. Click the button.

The current code example is:

<button type="button" class="btn btn-primary position-relative">
    class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-secondary"
    >+99 <span class="visually-hidden">unread messages</span></span

Mikołaj Smoleński staff answered 3 years ago

Thanks for letting us know about the issue. The problem was the ripple effect. It could be easily fixed by adding the following data attribute to the button:


We've just fixed the documentation.

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes