From 42322f8a9f0309374e57adcf113c5fd235d87fb2 Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Tue, 9 May 2023 18:57:13 +0200
Subject: [PATCH] [AAE-13566] changed select input's position (#8471)

* [AAE-13566] changed select input's position

* [AAE-13566] removed obsolete code
---
 .../card-view-selectitem.component.html       | 29 ++++++++++++-------
 .../card-view-selectitem.component.scss       |  9 ++++++
 .../select-filter-input.component.scss        |  2 --
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
index a31c099218..81c0220aaf 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -1,24 +1,31 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable()">
-    <div [attr.data-automation-id]="'card-select-label-' + property.key"
-        class="adf-property-label">{{ property.label | translate }}</div>
+    <div
+        [attr.data-automation-id]="'card-select-label-' + property.key"
+        class="adf-property-label"
+    >{{ property.label | translate }}</div>
     <div class="adf-property-field">
-        <div *ngIf="!isEditable()"
+        <div
+            *ngIf="!isEditable()"
             class="adf-select-item-padding adf-property-value"
             [attr.data-automation-id]="'select-readonly-value-' + property.key"
-            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}</div>
+            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
+        </div>
         <div *ngIf="isEditable()">
             <mat-form-field class="adf-select-item-padding-editable adf-property-value">
-                <mat-select [(value)]="value"
-                            panelClass="adf-select-filter"
-                            (selectionChange)="onChange($event)"
-                            data-automation-class="select-box"
-                            [aria-label]="property.label | translate">
+                <mat-select
+                    [(value)]="value"
+                    panelClass="adf-select-filter"
+                    (selectionChange)="onChange($event)"
+                    data-automation-class="select-box"
+                    [aria-label]="property.label | translate"
+                >
 
                     <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
 
                     <mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                    <mat-option *ngFor="let option of list$ | async"
-                                [value]="option.key">
+                    <mat-option
+                        *ngFor="let option of list$ | async"
+                        [value]="option.key">
                         {{ option.label | translate }}
                     </mat-option>
                 </mat-select>
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
index c704ebee9e..3ad503239e 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
@@ -11,3 +11,12 @@
     padding-top: 6px;
     padding-bottom: 6px;
 }
+
+.adf-select-filter-input {
+    background: var(--adf-theme-background-card-color);
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
index 2a3023d9b1..68116f8661 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
@@ -5,8 +5,6 @@ $select-filter-height: 4em !default;
     display: flex;
 
     .adf-select-filter-input-container {
-        position: absolute;
-        top: 0;
         width: 100%;
         display: flex;
         z-index: 100;