Topic: Floating button went underneath card
Start your code here<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Permitting for PMNM</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- Start your project here--> <body class="fixed-sn mdb-skin"> <header> <!--Double navigation inlcude--> <div id="nav"> <?php include('includes/nav.php'); ?> </div> <!--/.Double navigation include--> </header> <!--Main Layout--> <main> <!--Card--> <div class="card card-cascade wider"> <!--Card image--> <div class="view gradient-card-header peach-gradient"> <h2 class="h2-responsive">My Dashboard</h2> </div> <!--/Card image--> <!--Card content--> <div class="card-body text-center"> <!--Card group--> <div class="card-deck"> <!--Card--> <div class="card mb-4"> <!--Card image--> <div class="view overlay"> <img class="img-fluid" src="img/list.jpg" alt="New permit icon"> <a href="#!"> <div class="mask rgba-white-slight"></div> </a> </div> <!--Card image--> <!--Button--> <a class="btn-floating btn-action ml-auto mr-4 warning-color-dark"><i class="fa fa-chevron-right pl-1"></i></a> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">New Permit</h4> <!--Text--> <p class="card-text">Create a new permit application.</p> </div> <!--Card content--> </div> <!--Card--> <!--Card--> <div class="card mb-4"> <!--Card image--> <div class="view overlay"> <img class="img-fluid" src="img/list.jpg" alt="permit dashboard icon"> <a href="#!"> <div class="mask rgba-white-slight"></div> </a> </div> <!--Card image--> <!--Button--> <a class="btn-floating btn-action ml-auto mr-4 warning-color-dark"><i class="fa fa-chevron-right pl-1"></i></a> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Permit in Progress</h4> <!--Text--> <p class="card-text">Continue working on application.</p> </div> <!--Card content--> </div> <!--Card--> <!--Card--> <div class="card mb-4"> <!--Card image--> <div class="view overlay"> <img class="img-fluid" src="img/list.jpg" alt="Card image cap"> <a href="#!"> <div class="mask rgba-white-slight"></div> </a> </div> <!--Card image--> <!--Button--> <a class="btn-floating btn-action ml-auto mr-4 warning-color-dark"><i class="fa fa-chevron-right pl-1"></i></a> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Permit #1605</h4> <!--Text--> <p class="card-text">View your permit.</p> </div> <!--Card content--> </div> <!--Card--> </div> <!--Card group--> </div> <!--/.Card content--> </div> <!--/.Card--> </main> <!--Main Layout--> <!-- /Start your project here--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!--SideNav Button Initialization--> <script> $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </script> </body> </html>
Hi,
this problem is because you have normal cards inside cascading card and that's why .wider class affect on these three cards inside. These classes make your button is under the card image. For now, I can recommend you to remove .wider class and the problem disappear. In the future, we will try to fix this problem in our package.
Best,
Marta
iliketheinterwebs pro commented 7 years ago
Thank you Marta. Yes I'd love the fix in the future because I really like the wider class look. :)Marta Szymanska staff pro premium commented 7 years ago
We will inform when we will fix this.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No