Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Controlling the position of angular material 2 autocomplete options panel

I am trying to control the position of angular material 2 autocomplete options panel and place this panel in a separate div from the div of the actual input.

Here is what I have tried:

<div fxLayout="row">
  <div fxFlex="50">
    <form [formGroup]="formStatus.form">
      <div>
        <md-input-container>
          <input mdInput formControlName="title" placeholder="Titre">
        </md-input-container>
      </div>
      <div>
        <md-input-container>
          <input mdInput placeholder="Address" [mdAutocomplete]="auto" formControlName="address">
        </md-input-container>
      </div>
    </form>
  </div>
  <div fxFlex="50" style="background-color: palegreen">
    <!-- options panel should appear here in the palegreen div -->
    <md-autocomplete #auto="mdAutocomplete" [displayWith]="addressFormatter">
      <md-option *ngFor="let address of addresses | async" [value]="address">
        {{ address.description }}
      </md-option>
    </md-autocomplete>
  </div>
</div>

However, the options panel still appears right below the input and its position seems to be bound to that of the input...

like image 872
balteo Avatar asked Oct 29 '22 06:10

balteo


2 Answers

You can control the position of angular material 2 autocomplete options panel with the following code

::ng-deep .mat-autocomplete-panel{
  position: fixed !important;
  top:30% !important;
  left: 40%;
  right: 30%;
  border: 3px solid #73AD21;
  background-color: palegreen !important;
} 
like image 147
ferralucho Avatar answered Nov 16 '22 08:11

ferralucho


I am not sure if this exactly meets your requirements but you can control the position of mat-calendar and mat-autocomplete-panel by manipulating their parent classes. These overwritten classes need to sit level above the targeted component to take effect.

Example:

.mat-autocomplete-panel {
   position: fixed !important;
   top:30% !important;
   left: 40%;
   right: 30%;
   border: 3px solid #73AD21;
   background-color: palegreen !important;
}

Datepicker demo

Autocomplete demo

like image 25
Nehal Avatar answered Nov 16 '22 08:11

Nehal