autocomplete style changes

This commit is contained in:
Diamantis Tziotzios 2019-12-12 12:42:00 +02:00
parent d1d0cbd931
commit bcf4a3f6a2
4 changed files with 9 additions and 3 deletions

View File

@ -13,7 +13,7 @@
</ng-container>
</mat-chip-list>
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">

View File

@ -6,11 +6,14 @@
display: none;
}
.align-arrow-right {
position: absolute;
right: 0;
vertical-align: middle;
cursor: pointer;
align-self: center;
color: rgba(0, 0, 0, 0.54);
}
}

View File

@ -1,6 +1,6 @@
<div class="row auto-complete">
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">

View File

@ -29,6 +29,9 @@
position: absolute;
right: 0;
vertical-align: middle;
cursor: pointer;
align-self: center;
color: rgba(0, 0, 0, 0.54);
}
}