fixed scrollers on form container

dmp-frontend/src/app/form/dynamic-form.component.css

@@ -4,32 +4,14 @@
     margin-top:15px;
 }
 
-
-
-.styled-scrollbar::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	background-color: #F5F5F5;
-	border-radius: 10px;
-}
-
-.styled-scrollbar::-webkit-scrollbar-thumb {
-	border-radius: 10px;
-	background-image: -webkit-gradient(linear,
-            left bottom,
-            left top,
-            color-stop(0.44, rgb(122,153,217)),
-            color-stop(0.72, rgb(73,125,189)),
-            color-stop(0.86, rgb(28,58,148)));
-}
-
 .parent-div {
     height: calc(100vh - 80px);
     width:100%;
 }
 
+
+
 .child-div-left{
-    overflow-y: scroll;
     height: 100%;
 }
 
@@ -37,3 +19,13 @@
     overflow-y: scroll;
     height: 100%;
 }
+
+
+.form-body-container{
+    height: calc(100vh - 80px - 130px);
+    overflow-y:scroll; 
+}
+
+.form-footer-container {
+    height: 130px;
+}

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -1,9 +1,13 @@
 <div class="parent-div">
 
 
-	<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" id="form-container">
+	<div class="col-md-8 col-sm-9 child-div-left" >
 		
-		<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+
+			
+		<div class="col-md-12 form-body-container" id="form-container">
+
+			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 					
 				<div *ngFor = "let section of dataModel.sections; let i = index;">							
 						<div *ngIf="section.groupFields.length>0 else sectionHeader">												
@@ -30,8 +34,15 @@
 					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
 				</div> -->
 	
+	
+			</form>
+		</div>
+	
+		<div class="col-md-12 form-footer-container" >
+			
+
 			<div>
-				<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid">Save</button>
+				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" (click)="SaveFinalize();">Save</button>
 				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
 			</div>
 	
@@ -39,9 +50,9 @@
 				<strong>Saved the following values</strong><br>{{payLoad}}
 			</div>
 	
-		</form>
+			<!--
 			<p>Form value: {{ form.value | json }}</p>
-
+			-->
 	
 			
 			<div class="text-center">
@@ -65,19 +76,21 @@
 				</ul>
 			</div>
 
-		<div >
-			<div class="progress">
-				<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
-					{{dirtyValues}}%
-				</div>
-			</div>
-		</div>
 
 		</div>
 
 
 		
-	<div class="col-md-4  col-sm-3 child-div-right styled-scrollbar" id="toc-container">
+
+
+		
+
+
+	</div>	
+
+
+
+	<div class="col-md-4  col-sm-3 child-div-right" id="toc-container">
 		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 	</div>
 

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -196,7 +196,7 @@ export class DynamicFormComponent implements OnInit {
 
       var formScroller = new PerfectScrollbar("#form-container");
       var tocScroller = new PerfectScrollbar("#toc-container");
-      debugger;
+      
   }
 
   scrollToElemID(elemID) {

dmp-frontend/src/index.html

@@ -39,7 +39,7 @@
 		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 
-		<!-- Customized scrollbars -->
+		<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
 		<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
 		<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>