[ADF-4339] Fix documentList and ContentServices UI for IE11 (#4660)

* [ADF-4339] Fix documentList and ContentServices UI for IE11

* [ADF-4339] Fixed syntax mistake

lib/content-services/content-node-selector/content-node-selector-panel.component.scss

@@ -121,6 +121,11 @@
                     .adf-datatable-body .adf-datatable-row {
                         min-height: 40px;
 
+                        @media screen and (-ms-high-contrast: active),
+                        screen and (-ms-high-contrast: none) {
+                            padding-top: 15px;
+                        }
+
                         &:first-child {
                             .adf-datatable-cell {
                                 border-top: none;

lib/content-services/upload/components/upload-drag-area.component.scss

@@ -15,7 +15,11 @@ $adf-upload-dragging-level1-border: 1px dashed #2196f3 !default;
         @include flex-column;
 
         .adf-upload-border {
-            @include flex-column;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden;
+            min-height: 0;
             vertical-align: unset;
             text-align: unset;
             width: 100%;

lib/core/datatable/components/datatable/datatable.component.html

@@ -110,7 +110,7 @@
                                               *ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected">
                                     </mat-icon>
                                     <ng-template #no_selected_row>
-                                        <img
+                                        <img class="adf-datatable-center-img-ie"
                                             [attr.aria-label]="data.getValue(row, col) | fileType"
                                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                             src="{{ data.getValue(row, col) }}"
@@ -124,7 +124,7 @@
                             </div>
                             <div *ngSwitchCase="'date'" class="adf-cell-value"
                                  [attr.data-automation-id]="'date_' + (data.getValue(row, col) | date: 'medium') ">
-                                <adf-date-cell
+                                <adf-date-cell class = "adf-datatable-center-date-column-ie"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row"
@@ -142,7 +142,7 @@
                             </div>
                             <div *ngSwitchCase="'fileSize'" class="adf-cell-value"
                                  [attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
-                                <adf-filesize-cell
+                                <adf-filesize-cell class="adf-datatable-center-size-column-ie"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row"
@@ -185,7 +185,7 @@
                 <!-- Actions (right) -->
                 <div *ngIf="actions && actionsPosition === 'right'"
                      role="gridcell"
-                     class="adf-datatable-cell adf-datatable__actions-cell">
+                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie">
                     <button mat-icon-button [matMenuTriggerFor]="menu"
                             [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
                             [attr.id]="'action_menu_right_' + idx"

lib/core/datatable/components/datatable/datatable.component.scss

@@ -169,6 +169,31 @@
         background-color: mat-color($background, card);
         border: $data-table-dividers;
 
+            @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+                .adf-datatable-center-size-column-ie {
+                    padding-top: 17px;
+                }
+
+                .adf-datatable-center-actions-column-ie {
+                    padding-top: 7px !important;
+                }
+                .adf-datatable-center-date-column-ie {
+                    position: relative !important;
+
+                    .adf-datatable-cell-value {
+                        width: 100%;
+                    }
+                }
+
+                .adf-datatable-center-img-ie {
+                    padding:0;
+                    min-width: 0;
+                    width: 24px;
+                    height: 56px;
+                }
+
+            }
+
         .adf-datatable-header {
             display: flex;
             flex-direction: column;
@@ -341,6 +366,11 @@
                 word-break: break-word;
                 padding: 10px;
                 display: block;
+
+                @media screen and (-ms-high-contrast: active),
+                screen and (-ms-high-contrast: none) {
+                    padding: 17px 10px 10px;
+                }
             }
 
             &:focus {

lib/core/layout/components/layout-container/layout-container.component.html

@@ -10,7 +10,7 @@
     </mat-sidenav>
 
     <div>
-        <div class="adf-rtl-container-alignment" [@contentAnimationLeft]="getContentAnimationStateLeft()" [@contentAnimationRight]="getContentAnimationStateRight()">
+        <div class="adf-rtl-container-alignment adf-container-full-width" [@contentAnimationLeft]="getContentAnimationStateLeft()" [@contentAnimationRight]="getContentAnimationStateRight()">
             <ng-content select="[app-layout-content]"></ng-content>
         </div>
     </div>

lib/core/layout/components/layout-container/layout-container.component.scss

@@ -13,6 +13,10 @@
         margin-left: 10px!important;
     }
 
+    .adf-container-full-width {
+        width: 100%;
+    }
+
     .adf-sidenav--hidden {
         visibility: hidden !important;
         width: 0 !important;