How to position google autocomplete predictions?

Question

I have a table with a list of contacts as seen in the image. I also have an event that gets triggered when a row is clicked so it can show the selected contact detail (I am using angular NGIF directive to show and hide the detail)

The thing is because my google input is placed inside an NGIF block, when user expands the contact detail and tries to type in it, the predictions (pac-container) is showing on the row that I clicked (within the table) rather than underneath the google input autocomplete search box.

I tried to manipulate the css of the class pac-container but I couldn't figure out a way to override the css of that class.

Here is my the html of my autocomplete search box

<div *ngIf="showGoogleAddress" class="mg-b-10" fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlexFill>
          <div fxFlex>
            <mat-form-field appearance="outline" class="form-field">
              <mat-label>Google Address Search Box</mat-label>
              <input [debounceTime]="500" ngxAutocomPlace autocomplete="off" (selectedPlace)="placeChanged($event)" placeholder="ex: Phoenix, Arizona" matInput #googleAddress="matInput" >
              <mat-icon matSuffix>location_on</mat-icon>
              <mat-hint>Search for compolete address, or city</mat-hint>
            </mat-form-field>
          </div>

        </div>

also, here is a screenshot of the entire form after expanding the detail

If the google autocomplete box was outside the NGIF, then it will render the predictions just fine without an issue. It seems that because I am using NGIF directive, the google component is not able to determine the right position (calculate the right position) to render its predictions..

When I tried

.pac-container {
  position: absolute !important;
  z-index: 100000;
}

it did not work.

Riad Riad · Accepted Answer · 2021-06-06T18:45:18

I had to go with a DOM Manipulation way using JS.. so I added a (keyUp) event handler on google search box with a method to calculate the position like the following:

adjustResPosition() {
      setTimeout(() => {
        var gSearchBar = document.getElementById('googleBar');
        var topPos = (gSearchBar?.getBoundingClientRect().top || 0) + window.scrollY + 25;
        var leftPos = (gSearchBar?.getBoundingClientRect().left || 0) + window.scrollX;

        var gPreds = document.querySelector('.pac-container');
        gPreds?.setAttribute('style', `top: ${topPos}px; position: absolute!important; width: auto; left: ${leftPos}px`);
      }, 600);
    }

The reason why I put setTimeout to 600ms is because I have a debounce 500 ms each until it grabs the next predictions and put it in the pac-container div

Note, this is not an optimal solution and it can be improved with ViewChild or ElementRef

How to position google autocomplete predictions?

1 Answers