table fixed

Apollo/assets/js/controllers/dashboardCtrl.js

@@ -107,6 +107,76 @@ app.controller('dashboardCtrl', ["$scope","$rootScope", "toaster", "$filter", "n
 
 }]);
 
+
+/*Header Fixed */
+app.directive('fixedHeader', function($timeout){
+ return {
+            restrict: 'A',
+            link: link
+        };
+
+        function link($scope, $elem, $attrs, $ctrl) {
+            var elem = $elem[0];
+
+            // wait for data to load and then transform the table
+            $scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
+                if (isTableDataLoaded) {
+                    transformTable();
+                }
+            });
+
+            function tableDataLoaded() {
+                // first cell in the tbody exists when data is loaded but doesn't have a width
+                // until after the table is transformed
+                var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
+                return firstCell && !firstCell.style.width;
+            }
+
+            function transformTable() {
+                // reset display styles so column widths are correct when measured below
+                angular.element(elem.querySelectorAll('thead, tbody')).css('display', '');
+
+                // wrap in $timeout to give table a chance to finish rendering
+                $timeout(function () {
+                    // set widths of columns
+                    angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {
+
+                        var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
+                        var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');
+
+                        var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
+                        if (tdElems) {
+                            tdElems.style.width = columnWidth + '150px';
+                        }
+                        if (thElem) {
+                            thElem.style.width = columnWidth + '150px';
+                        }
+                        
+                    });
+
+                    // set css styles on thead and tbody
+                    angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');
+
+                    angular.element(elem.querySelectorAll('tbody')).css({
+                        'display': 'block',
+                        'height': $attrs.tableHeight || 'inherit',
+                        'overflow': 'auto'
+                    });
+
+                    // reduce width of last column by width of scrollbar
+                    var tbody = elem.querySelector('tbody');
+                    var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
+                    if (scrollBarWidth > 0) {
+                        // for some reason trimming the width by 2px lines everything up better
+                        scrollBarWidth -= 2;
+                        var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
+                        lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
+                    }
+                });
+            }
+        }
+});
+
 app.controller('OnotherCtrl', ["$scope", "toaster", "$filter", "$http", "API_POINTS", "$state", '$cookies', 'ipCookie', function ($scope, toaster, $filter, $http, apiPoint, $state, $cookies, ipCookie) {
 
     // get local cliend details

Apollo/assets/views/student/studentDetailsModal.html

@@ -22,11 +22,16 @@
    .ti-plus:before {
        color: #006f95;
    }
+ .carddesign{
+        box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14),
+         0 3px 3px -2px rgba(0,0,0,0.12),
+          0 1px 8px 0 rgba(0,0,0,0.2);
+    }
 
 
 </style>
 <!-- start: UI BOOTSTRAP MODALS -->
-<div class="container-fluid container-fullw bg-white">
+<div class="container-fluid container-fullw bg-white" style="width: 1000px;">
     <!-- /// controller:  'ModalDemoCtrl' -  localtion: assets/js/controllers/bootstrapCtrl.js /// -->
     <div ng-controller="studentModalDemoCtrl">
 <div class="row">
@@ -187,7 +192,7 @@
         <div class="row" ng-repeat="course in items.courseDetails.courseStatus">
             <div class="col-md-12">
                 <div class="panel panel-white" id="panel2">
-                    <div class="panel-heading">
+                    <div class="panel-heading carddesign">
                         <div class="clearfix padding-5 space5" >
                             <div class="row">
                             <div class="col-xs-12 text-center no-padding">
@@ -231,13 +236,13 @@
                             <tabset class="tabbable">
 
                                 <tab heading="Fees Details" id="fees" >
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll  ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.feesDetails==false">
                                             <!--  <center>
                                                   <h5 class="text-dark">No Fees Details!</h5>
                                               </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.feesDetails!=false">
+                                        <table class="table no-margin height-200 ng-scope" ng-if="course.feesDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <th>Sem/Year</th>
@@ -299,13 +304,13 @@
 
                                 </tab>
                                 <tab heading="Application Details" id="application">
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll  ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.applicationDetails==false">
                                             <!--<center>
                                                 <h5 class="text-dark">No Document Details!</h5>
                                             </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.applicationDetails!=false">
+                                        <table class="table height-200 no-margin ng-scope" ng-if="course.applicationDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <!-- <th>Type</th>-->
@@ -344,13 +349,13 @@
                                     </div>
                                 </tab>
                                 <tab heading="Answer Booklet Details" id="booklet">
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar=""  data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.answerbookletDetails==false">
                                             <!--<center>
                                                 <h5 class="text-dark">No Document Details!</h5>
                                             </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.answerbookletDetails!=false">
+                                        <table class="table height-200 no-margin ng-scope" ng-if="course.answerbookletDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <!-- <th>Type</th>-->
@@ -391,13 +396,13 @@
 
 
                                 <tab heading="Document Details" id="document">
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.certificateDetails==false">
                                             <!--<center>
                                                 <h5 class="text-dark">No Document Details!</h5>
                                             </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.certificateDetails!=false">
+                                        <table class="table height-200 no-margin ng-scope" ng-if="course.certificateDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <!-- <th>Type</th>-->
@@ -441,13 +446,13 @@
 
 
                                 <tab heading="Mark Card Details" id="mark">
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll  ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar=""  data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.markCardDetails==false">
                                             <!--<center>
                                                 <h5 class="text-dark">No Mark Card Details!</h5>
                                             </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.markCardDetails!=false">
+                                        <table class="table height-200 no-margin ng-scope" ng-if="course.markCardDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <th>Sem/Year</th>
@@ -511,13 +516,13 @@
                                     </div>
                                 </tab>
                                 <tab heading="Study Material Details" id="material">
-                                    <div class="panel-scroll height-200 ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" wheel-propagation="false" suppress-scroll-x="true" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
+                                    <div class="panel-scroll ng-scope ps-container ps-theme-default ps-active-y" perfect-scrollbar="" data-ps-id="6fc3054c-6292-144d-eff7-cd557f527468">
                                         <div ng-if="course.studyMaterialDetails==false">
                                             <!-- <center>
                                                  <h5 class="text-dark">No Study Material Details!</h5>
                                              </center>-->
                                         </div>
-                                        <table class="table no-margin ng-scope" ng-if="course.studyMaterialDetails!=false">
+                                        <table class="table height-200 no-margin ng-scope" ng-if="course.studyMaterialDetails!=false" fixed-header>
                                             <thead>
                                             <tr>
                                                 <th>Sem/Year</th>