fixed scrollers on form container
This commit is contained in:
Nikolaos Laskaris
parent
0d8c0514a6
commit
57159bf523
|
|
@ -4,36 +4,28 @@
|
||||||
margin-top:15px;
|
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 {
|
.parent-div {
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 80px);
|
||||||
width:100%;
|
width:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.child-div-left{
|
.child-div-left{
|
||||||
overflow-y: scroll;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child-div-right {
|
.child-div-right {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-body-container{
|
||||||
|
height: calc(100vh - 80px - 130px);
|
||||||
|
overflow-y:scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-footer-container {
|
||||||
|
height: 130px;
|
||||||
}
|
}
|
||||||
|
|
@ -1,83 +1,96 @@
|
||||||
<div class="parent-div">
|
<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">
|
||||||
|
|
||||||
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||||
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
|
||||||
<div *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
|
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
||||||
<div *ngFor="let group of section.groupFields">
|
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
||||||
<div *ngIf="shouldIShow(group);" >
|
<div *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
|
||||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
<div *ngFor="let group of section.groupFields">
|
||||||
</div>
|
<div *ngIf="shouldIShow(group);" >
|
||||||
</div>
|
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<ng-template *ngIf="shouldIShow(section);" #sectionHeader>
|
||||||
|
<h2>{{section.title}}</h2>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngFor="let field of dataModel.fields">
|
||||||
|
<div [formGroup]="form" class="form-group">
|
||||||
|
<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ng-template *ngIf="shouldIShow(section);" #sectionHeader>
|
|
||||||
<h2>{{section.title}}</h2>
|
<!-- <div *ngFor="let group of dataModel.groups">
|
||||||
</ng-template>
|
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div *ngFor="let field of dataModel.fields">
|
|
||||||
<div [formGroup]="form" class="form-group">
|
</form>
|
||||||
<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="col-md-12 form-footer-container" >
|
||||||
|
|
||||||
<!-- <div *ngFor="let group of dataModel.groups">
|
|
||||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div>
|
<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>
|
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="payLoad" class="form-row">
|
<div *ngIf="payLoad" class="form-row">
|
||||||
<strong>Saved the following values</strong><br>{{payLoad}}
|
<strong>Saved the following values</strong><br>{{payLoad}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
<!--
|
||||||
<p>Form value: {{ form.value | json }}</p>
|
<p>Form value: {{ form.value | json }}</p>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<!-- pagination -->
|
<!-- pagination -->
|
||||||
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
|
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
|
||||||
<li [ngClass]="{disabled:pagination.currentPage === 1}">
|
<li [ngClass]="{disabled:pagination.currentPage === 1}">
|
||||||
<a (click)="setPage(1)" class="cursor-link" >First</a>
|
<a (click)="setPage(1)" class="cursor-link" >First</a>
|
||||||
</li>
|
</li>
|
||||||
<li [ngClass]="{disabled:pagination.currentPage === 1}">
|
<li [ngClass]="{disabled:pagination.currentPage === 1}">
|
||||||
<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
|
<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
|
<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
|
||||||
<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
|
<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
|
||||||
</li>
|
</li>
|
||||||
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
|
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
|
||||||
<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
|
<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
|
||||||
</li>
|
</li>
|
||||||
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
|
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
|
||||||
<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
|
<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-md-4 col-sm-3 child-div-right styled-scrollbar" id="toc-container">
|
<div class="col-md-4 col-sm-3 child-div-right" id="toc-container">
|
||||||
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -196,7 +196,7 @@ export class DynamicFormComponent implements OnInit {
|
||||||
|
|
||||||
var formScroller = new PerfectScrollbar("#form-container");
|
var formScroller = new PerfectScrollbar("#form-container");
|
||||||
var tocScroller = new PerfectScrollbar("#toc-container");
|
var tocScroller = new PerfectScrollbar("#toc-container");
|
||||||
debugger;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToElemID(elemID) {
|
scrollToElemID(elemID) {
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<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">
|
<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
|
||||||
<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
|
<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue