2

I am running angular app, I have autocomplete field ,I want adjust position of this . I referred official document enter link description here under method , updatePosition - Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.

I am not sure how to use

This is my template.html

 <mat-form-field [style.cursor]="pointer" [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>

As shown the pic below I want the mat-option to move little towards left

enter image description here

As shown in this pic, class highlighted always gets style applied to left:779px but I want to remain atv 775px

enter image description here

karansys
  • 2,449
  • 7
  • 40
  • 78

1 Answers1

0

I was able to style this using 


.mat-autocomplete-panel { 
  position:relative;
  right:3px;
}
karansys
  • 2,449
  • 7
  • 40
  • 78