Chnages made for rdp-data-table layout fix

Chnages made for rdp-data-table layout fix and modified pom files

Issue-ID: PORTAL-836
Change-Id: I42f0d0ed188a19e42e14ad56250a1e904b92827f
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

2 files changed, 78 insertions, 10 deletions

diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html
index 8a967121..a0e2b01b 100644
--- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html
+++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html
@@ -2,7 +2,7 @@
   ============LICENSE_START==========================================
   ONAP Portal- SDK
   ===================================================================
-  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  Copyright (C) 2020 AT&T Intellectual Property. All rights reserved.
   ===================================================================
  
   Unless otherwise specified, all software contained herein is licensed
@@ -45,10 +45,10 @@
   
     <div class="modal-body">
       <!-- This is the modal body where fields has to apper with respect to their field type -->
-      <div *ngFor="let column of columnsInfoList">
-          {{column.dispalyTitle | titlecase}}
+      <div *ngFor="let column of columnsInfoList" class="elementsContainer">
           <div [ngSwitch]="column.type">
-            <div *ngSwitchCase="'text'">
+            <div *ngSwitchCase="'text'" class="groupItem">
+              <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
               <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" 
                 rowdata="{{selectedRowData}}" 
                 columntitle="{{column.title}}" 
@@ -56,28 +56,33 @@
               >
               </rdp-input-editor>
             </div>
-            <div *ngSwitchCase="'dropdown'">
+            <div *ngSwitchCase="'dropdown'" class="groupItem">
               <rdp-select-editor (changedColumnValue)="columnDataChanged($event, column.title)"
                rowdata="{{selectedRowData}}" 
                [data]="column.listData" 
                columntitle="{{column.title}}"></rdp-select-editor>
             </div> 
-            <div *ngSwitchCase="'textarea'">
+            <div *ngSwitchCase="'textarea'" class="groupItem">
+              <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
               <rdp-textarea-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-textarea-editor>
             </div> 
-            <div *ngSwitchCase="'checkbox'">
+            <div *ngSwitchCase="'checkbox'" class="groupItem">
+              <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
               <rdp-checkbox-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-checkbox-editor>
             </div> 
-            <div *ngSwitchCase="'radio'">
+            <div *ngSwitchCase="'radio'" class="groupItem">
+              <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
               <rdp-radio-editor (changedColumnValue)="columnDataChanged($event, column.title)"
               [data]="column.listData" 
                rowdata="{{selectedRowData}}" 
                columntitle="{{column.title}}"></rdp-radio-editor>
             </div>
-            <div *ngSwitchCase="'datepicker'">
+            <div *ngSwitchCase="'datepicker'" class="groupItem">
+              <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
               <rdp-datepicker-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-datepicker-editor>
             </div>
-            <div *ngSwitchDefault>
+            <div *ngSwitchDefault class="groupItem">
+                <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br>
                 <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" 
                 rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-input-editor>
             </div>      
diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss
index e69de29b..c0c95d90 100644
--- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss
+++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss
@@ -0,0 +1,63 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2020 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+::ng-deep .modal-dialog { 
+    max-width: 1200px;
+    width: 855px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+
+.elementsContainer{
+    display: inline-flex;
+}
+
+.groupItem{
+    margin-right: 11px;
+    margin-bottom: 10px;
+}
+
+.form-field{
+    height: 30px;
+    width: 198px
+}
+
+.item-label{
+    margin-bottom: 1px;
+}
\ No newline at end of file