Topic: Floating button went underneath card

iliketheinterwebs pro asked 6 years ago


The floating button is now underneath card and I don't know what to do to bring it back to the top of the card. TIA for your help. Here is my code:
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>

Marta Wierzbicka staff answered 6 years ago


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 6 years ago

Thank you Marta. Yes I'd love the fix in the future because I really like the wider class look. :)

Marta Wierzbicka staff commented 6 years ago

We will inform when we will fix this.


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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags