Bug in stretched-link


Topic: Bug in stretched-link

dbsgroep pro premium priority asked a year ago

Expected behavior When adding stretched-link class to a anchor inside a card, the while card should be clickable.

Actual behavior Clicking the anchor itself works, but outside the anchor (anywhere inside the card, but the anchor) it is stopped by some Javascript. Disabling the javascript (https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js) seems to make it work just fine. I have the feeling that it is related to the ripple effect on the button that is generated by javascript.

Resources (screenshots, code snippets etc.)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.3.1/mdb.min.css"
rel="stylesheet"
/>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="card" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card with stretched link</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="https://google.com" class="btn btn-primary stretched-link">Go somewhere</a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.3.1/mdb.min.js"></script>
  </body>
</html>

kpienkowska staff answered a year ago

This is a bug and we will need to fix it. Until then stretched link won't work with btn class.


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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.3.1
  • Device: PC
  • Browser: Firefox, Chrome
  • OS: WIndows
  • Provided sample code: No
  • Provided link: Yes