Incorrect Behavior with Positioning on Buttons


Topic: Incorrect Behavior with Positioning on Buttons

sigalph premium asked 1 year 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 https://mdbootstrap.com/docs/standard/utilities/position/ and look at the Additional examples section. Click the button.

The current code example is:

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

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:

data-ripple-unbound="true"

We've just fixed the documentation.

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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