I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport."
However, I am unsure of how to implement this.
This is a snippet of my template.html:
<mat-form-field [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
In the image below, you can see that I would like the mat-option to shift slightly to the left.
https://i.stack.imgur.com/FjEFk.png
Additionally, as highlighted in this image, the class always receives a style applied on the left at 779px when I want it to stay at 775px.