Topic: Incorrect Behavior with Positioning on Buttons
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: PC
- Browser: Google Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: Yes