modal style

Author: cbeldacap

oasp4js-sample/src/app/components/crud/view/Crud.component.html

@@ -28,11 +28,11 @@
   </div>
 
 </div>
-
+<!-- style="position:absolute; left: 0px; top: 0px; width:100%; height:100%;" -->
 <modal-dialog id="modal"
   *ngIf="hideModalDialog"
   [modal]=true
   [TITLE]=modalHeader
-  style="position:absolute; left: 0px; top: 0px; width:100%; height:100%;">
+  class="modaldialog">
   <tableDetails [parentTable]="selectedTable" (closeWindowEvent)="hideModalDialog = $event" (resultEvent)="rowSelected($event)" [_commands]="_commands"></tableDetails>
 </modal-dialog>

oasp4js-sample/src/app/components/details/service/Details.service.ts

@@ -9,8 +9,6 @@ export class DetailsService{
   commands : Command[] = [];
   commandList : Command[] = commandsList;
 
-
-
   addCommand(c:Command){
 
     let n = 0;
@@ -26,8 +24,6 @@ export class DetailsService{
   }
 
   removeCommand(c:Command){
-    // debugger
-    // let index = this.commands.indexOf(c);
     for(let i = 0; i < this.commands.length ; i ++){
       if(this.commands[i].number === c.number){
         this.commands.splice(i,1);

oasp4js-sample/src/app/oasp/oasp-ui/modal-dialog/modal-dialog.component.html

@@ -1,8 +1,8 @@
 <!-- background mask -->
-<div [hidden]="!modal" style= "position:absolute; left: 0px; top: 0px; width:100%; height:100%; background-color: grey; opacity: 0.6;"></div>
+<div [hidden]="!modal" style= "position:absolute; left: 0px; top: 0px; width:100%; height:100%; background-color: black; opacity: 0.6;"></div>
 
 <!-- modal -->
-<div class="modal-dialog" style="left:250px; top:250px;">
+<div class="modal-dialog">
 	<div class="modal-content">
 		<div class="modal-header">
 			<h3 class="modal-title">{{title}}</h3>

oasp4js-sample/src/app/oasp4js-sample.component.css

@@ -7146,26 +7146,23 @@ tr.selected {
   width:60%;
 }
 
-/*---------MODAL---------*/
+/***********MODAL-DIALOG**********/
 
-.modal {
-  text-align: center;
-}
-
-@media screen and (min-width: 768px) {
-  .modal:before {
-    display: inline-block;
-    vertical-align: middle;
-    content: " ";
-    height: 100%;
-  }
+.modaldialog {
+  position:absolute;
+  left: 0px;
+  top: 0px;
+  width:100%;
+  height:100%;
 }
 
+/*
 .modal-dialog {
   display: inline-block;
   text-align: left;
   vertical-align: middle;
 }
+*/
 
 /************** PAGINATION ****************/