Link to home
Create AccountLog in
Avatar of David Schure
David Schure

asked on

Can't Scroll Records

I have a page with the Client's records. However, I am unable to scroll to see all of the records. For some reason it cuts off.  Is it the CSS ?
User generated image
$sql = <<<EOT
    SELECT DATE_FORMAT(tbl_session.session_date,"%W, %M, %d, %Y") AS DATE,
   TIME_FORMAT(CONCAT(tbl_session.time_slot_id, ":00:00"), "%h:%i %p") AS TIME,
   tbl_session.session_type AS TYPE, tbl_therapist.therapist_name as THERAPIST, tbl_session.session_status AS STATUS
    FROM tbl_session
    INNER JOIN tbl_therapist
    ON tbl_therapist.therapist_id=tbl_session.therapist_id
   WHERE tbl_session.client_id=$client_id
    ORDER BY session_date ASC;
EOT;
$result = $db->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Client | Session History</title>
      <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
      <link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
      <link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
      <link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
      <link href="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" media="screen">
      <link href="vendor/select2/select2.min.css" rel="stylesheet" media="screen">
      <link href="vendor/bootstrap-datepicker/bootstrap-datepicker3.standalone.min.css" rel="stylesheet" media="screen">
      <link href="vendor/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" media="screen">
      <link rel="stylesheet" href="assets/css/styles.css">
      <link rel="stylesheet" href="assets/css/plugins.css">
      <link rel="stylesheet" href="assets/css/themes/theme-6.css" id="skin_color" />
        <!--?php include("/home/audiodigz/public_html/MESS/styles/css_front_end.php"); ?-->
<style>
/*.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 35%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
  width: 35%;
  color: white;
  height: 100%;
  background: black;
  opacity: .7;
  height: 210px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.img-placeholder h4 {
  margin-top: 49%;
  color: white;
}
.img-div:hover .img-placeholder {
  display: block;
  cursor: pointer;
}
.therapist{
   font-size:24px;
   color:#000;
   text-align:center;
   margin: 0 auto;
}*/
.panel-white, .partition-white {
     background-color: #ffffff;
     position: relative;
     color: #5b5b60;
     border: 1px solid rgba(0, 0, 0, 0.07);
     height:400px;
   width:650px;
   margin-top:-20px;
   }
#report{
   color:#000;
}
   .sub{padding-top:24px;}
 
tr:nth-child(even) {
  background-color: #f2f2f2;
}      
.topics tr { line-height: 28px; }      
      </style>
    </head>
   <body>
   <div id="app">      
   <?php include('includes/sidebar.php');?>
   <div class="app-content">
   <?php include('includes/header.php');?>
    <!-- end: TOP NAVBAR -->
   
    <div class="main-content">
   <div class="wrap-content container" id="container">
         
    <!-- start: PAGE TITLE -->
   <section id="page-title">
   <div class="row">
   <div class="col-sm-8">
   <h1 class="mainTitle"><span>Client |</span><span style="color:#C90"> Session History</span></h1>                              
   </div>
   </div>
   </section>
   <!-- end: PAGE TITLE -->
   
    <!-- start: BASIC EXAMPLE -->
   <div class="container-fluid container-fullw bg-white">
   <div class="row">
   <div class="col-lg-8 col-md-12">
   <div class="panel panel-white">
   <div class="panel-body">
   <!--h5 style="color: green; font-size:18px;" style="display:none" id="form-message"></h5-->
    <h4><?php echo $client->name?>'s Session History</h4>
    <!--p><b>Registration Date: </b><!--?php echo $client->creation_date;?></p>
   <!--?php if($client->updation_date): ?-->
   
    <!--Last Update-->
   <p><b>Last Update: </b><?php echo $client->updation_date;?></p>
   <!--?php endif;?-->  
   
   
    <div id="report">
      <form>
   <table class="topics" style="width:100%">
    <colgroup>
          <!--col style="width: 10%;"-->
      <!--col style="width: 0%;"-->
      <col style="width: 35%;">
      <col style="width: 15%;">
      <col style="width: 15%;">
      <col style="width: 20%;">
      <col style="width: 15%;">
    </colgroup>
    <thead>
        <tr>
            <!--th>SELECT</th-->
         <!--th></th-->
         <th>DATE</th>
            <th>TIME</th>
         <th>TYPE</th>
         <th>THERAPIST</th>
         <th>STATUS</th>
        </tr>
    </thead>
    <tbody>
    <?php while ($row = $result->fetch(PDO::FETCH_OBJ)): ?>
        <tr>
            <!--td><input type="checkbox"></td-->
         <!--td><!?= $row->ID; ?></td-->
            <td><?= $row->DATE; ?></td>
         <td><?= $row->TIME; ?></td>
         <td><?= $row->TYPE; ?></td>
         <td><?= $row->THERAPIST; ?></td>
         <td><?= $row->STATUS; ?></td>
        </tr>
    <?php endwhile; ?>
    </tbody>
</table>
</form>
<!--div class="sub">
<button type="submit" name="submit" class="btn btn-o btn-primary">Cancel Session</button>      
</div-->
</div>   
<!-- end: BASIC EXAMPLE -->                           
</div>
</div>
</div>
</div>
</div>
<script src="../supportboard/js/min/jquery.min.js"></script> <!-- Not required if jQuery is already loaded -->
<script src="../supportboard/js/init.js"></script>  
      <!-- start: MAIN JAVASCRIPTS -->
      <script src="vendor/jquery/jquery.min.js"></script>
      <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
      <script src="vendor/modernizr/modernizr.js"></script>
      <script src="vendor/jquery-cookie/jquery.cookie.js"></script>
      <script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
      <script src="vendor/switchery/switchery.min.js"></script>
      <!-- end: MAIN JAVASCRIPTS -->
      <!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
      <script src="vendor/maskedinput/jquery.maskedinput.min.js"></script>
      <script src="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
      <script src="vendor/autosize/autosize.min.js"></script>
      <script src="vendor/selectFx/classie.js"></script>
      <script src="vendor/selectFx/selectFx.js"></script>
      <script src="vendor/select2/select2.min.js"></script>
      <script src="vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
      <script src="vendor/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
      <!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
      <!-- start: CLIP-TWO JAVASCRIPTS -->
      <script src="assets/js/main.js"></script>
      <!-- start: JavaScript Event Handlers for this page -->
      <script src="assets/js/form-elements.js"></script>
      <script>
         jQuery(document).ready(function() {
            Main.init();
            FormElements.init();
         });
      </script>
      <!-- end: JavaScript Event Handlers for this page -->
      <!-- end: CLIP-TWO JAVASCRIPTS -->
        <!--script src="../AVATAR/scripts.js"></script-->
   </body>
</html>


Avatar of Cyril Joudieh
Cyril Joudieh
Flag of Lebanon image

for #report in css add

max-height: 500px;
overflow: auto;
Avatar of David Schure
David Schure

ASKER

Hi added that and it's still not showing...
User generated image
As I see from the pics you posted, you had one scrollbar and now you have two. There must be something preventing them from working. I would check the enclosing divs like row.
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Wow lenamtl what a super idea!!!!!! I ilke this!!!!
Note about package to download https://datatables.net/download/ 
when using Bootstrap v4

Step 1. Choose a styling framework = select Bootstrap v4

Step 2. Select packages = DataTables 

Step 3. Select All Extensions (even if you are not going to use them all) because it complicated to find the same compatible version if you download it later.

Datatables have a learning curve but it so powerfull and flexible I'm use it everday.
With the responsive setting you can display large table on mobile, some of my tables have 20 columns...

For filters I do prefer to use Yadcf I'm using externally triggered for better result on responsive.
https://yadcf-showcase.appspot.com/dom_source_externally_triggered.html
https://github.com/vedmack/yadcf