troubleshooting Question

Can't Scroll Records

Avatar of David Schure
David Schure asked on
6 Comments1 Solution18 ViewsLast Modified:
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 ?

$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;
$result = $db->query($sql);

<!DOCTYPE html>
<html lang="en">
      <title>Client | Session History</title>
      <link href=",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"); ?-->
/*.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;
   margin: 0 auto;
.panel-white, .partition-white {
     background-color: #ffffff;
     position: relative;
     color: #5b5b60;
     border: 1px solid rgba(0, 0, 0, 0.07);
tr:nth-child(even) {
  background-color: #f2f2f2;
.topics tr { line-height: 28px; }      
   <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>                              
   <!-- 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">
   <table class="topics" style="width:100%">
          <!--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%;">
    <?php while ($row = $result->fetch(PDO::FETCH_OBJ)): ?>
            <!--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>
    <?php endwhile; ?>
<!--div class="sub">
<button type="submit" name="submit" class="btn btn-o btn-primary">Cancel Session</button>      
<!-- end: BASIC EXAMPLE -->                           
<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 -->
      <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>
      <!-- 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>
         jQuery(document).ready(function() {
      <!-- end: JavaScript Event Handlers for this page -->
      <!-- end: CLIP-TWO JAVASCRIPTS -->
        <!--script src="../AVATAR/scripts.js"></script-->


Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros