[AAE-13566] changed select input's position (#8471)

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

* [AAE-13566] removed obsolete code
This commit is contained in:
tomasz hanaj
2023-05-09 18:57:13 +02:00
committed by GitHub
parent 2b8f81dfe4
commit 42322f8a9f
3 changed files with 27 additions and 13 deletions

View File

@@ -1,23 +1,30 @@
<ng-container *ngIf="!property.isEmpty() || isEditable()"> <ng-container *ngIf="!property.isEmpty() || isEditable()">
<div [attr.data-automation-id]="'card-select-label-' + property.key" <div
class="adf-property-label">{{ property.label | translate }}</div> [attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label"
>{{ property.label | translate }}</div>
<div class="adf-property-field"> <div class="adf-property-field">
<div *ngIf="!isEditable()" <div
*ngIf="!isEditable()"
class="adf-select-item-padding adf-property-value" class="adf-select-item-padding adf-property-value"
[attr.data-automation-id]="'select-readonly-value-' + property.key" [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()"> <div *ngIf="isEditable()">
<mat-form-field class="adf-select-item-padding-editable adf-property-value"> <mat-form-field class="adf-select-item-padding-editable adf-property-value">
<mat-select [(value)]="value" <mat-select
[(value)]="value"
panelClass="adf-select-filter" panelClass="adf-select-filter"
(selectionChange)="onChange($event)" (selectionChange)="onChange($event)"
data-automation-class="select-box" data-automation-class="select-box"
[aria-label]="property.label | translate"> [aria-label]="property.label | translate"
>
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input> <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 *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option *ngFor="let option of list$ | async" <mat-option
*ngFor="let option of list$ | async"
[value]="option.key"> [value]="option.key">
{{ option.label | translate }} {{ option.label | translate }}
</mat-option> </mat-option>

View File

@@ -11,3 +11,12 @@
padding-top: 6px; padding-top: 6px;
padding-bottom: 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;
}

View File

@@ -5,8 +5,6 @@ $select-filter-height: 4em !default;
display: flex; display: flex;
.adf-select-filter-input-container { .adf-select-filter-input-container {
position: absolute;
top: 0;
width: 100%; width: 100%;
display: flex; display: flex;
z-index: 100; z-index: 100;