1

I'm using Angular Material version 7 and I would like to ask how to keep the autocomplete panel position to always be "above" the input. Right now, if there's still space below, the autocomplete panel will show below. Only when there's no more space below then it will display above. I would like to always display it above.

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>
iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78

2 Answers2

0
<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" position='above'>
</mat-form-field>

Documentation is here: https://material.angular.io/components/autocomplete/api

IAfanasov
  • 4,775
  • 3
  • 27
  • 42
  • 1
    Sorry, I missed that. The position property was introduced only with versions 8. With version 7 it would be quite a pain to implement. I would rather postpone this change in the project until it would be possible to update to newer Angular Material version. – IAfanasov Jun 17 '20 at 07:09
0

use [matAutocompletePosition]="'above'" like so

<form>
                <img matPrefix class="search-icon" src="../../../../assets/images/icons/24/search.svg" alt="search-icon" />
                <input
                    (focus)="formFocus=true"
                    (blur)="formFocus=false"
                    [ngStyle]="formFocus ? {'background-color': 'white'} : {'background-color': 'transparent'}"
                    matInput
                    #searchElement
                    [formControl]="docCtrl"
                    class="search-input"
                    type="text"
                    (keyup)="docChanged(docCtrl?.value)"
                    [matAutocomplete]="auto"
                    [matAutocompletePosition]="'above'"
                    [matAutocompleteConnectedTo]="origin"
                    placeholder="{{typeSelected ? typeSelected + ' number' : 'Select a type from the options above'}}"
                />
                <button type="reset">&times;</button>
                <mat-autocomplete class="ac-style" classList="ac-style" #auto="matAutocomplete" [panelWidth]="588">
                    <div style="height: 1px; background-color: #aaaaaa; margin-left: 20px; margin-right:20px;"></div>
                    <mat-option (mouseenter) ="mouseEnter($event, i)"  (mouseleave) ="mouseLeave($event, i)" #option (onSelectionChange)="pageNavigation($event, data)" *ngFor="let data of filteredDocs; let i = index;" [value]="' ' + data.policyNo + ' ' + '-' + ' ' + data.term + ' ' + '-' + ' ' + data.lob + ' ' + '-' + ' ' + data.riskAddress">
                        <img [src]="option.active ? '../../../../assets/images/icons/24/search-white.svg' : '../../../../assets/images/icons/24/search.svg'" matPrefix class="search-icon" alt="search-icon">   
                        <span style="vertical-align: middle;" [innerHTML]="' ' +  data.policyNo + ' ' + '-' + ' ' + data.term + ' ' + '-' + ' ' + data.lob + ' ' + '-' + ' ' + data.riskAddress | highlight : searchElement.value"></span>
                    </mat-option>
                    <mat-option *ngIf="filteredDocs.length === 0" [value]="">
                    </mat-option>
                </mat-autocomplete>
            </form>
Emad Kheiralla
  • 1