title: Controlling the position of angular material 2 autocomplete options panel
body: <p>I am trying to <strong>control the position of angular material 2 autocomplete options panel</strong> and place this panel in a separate div from the div of the actual input.</p>
  
  <p>Here is what I have tried:</p>
  
  <pre><code>&lt;div fxLayout="row"&gt;
    &lt;div fxFlex="50"&gt;
      &lt;form [formGroup]="formStatus.form"&gt;
        &lt;div&gt;
          &lt;md-input-container&gt;
            &lt;input mdInput formControlName="title" placeholder="Titre"&gt;
          &lt;/md-input-container&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;md-input-container&gt;
            &lt;input mdInput placeholder="Address" [mdAutocomplete]="auto" formControlName="address"&gt;
          &lt;/md-input-container&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div fxFlex="50" style="background-color: palegreen"&gt;
      &lt;!-- options panel should appear here in the palegreen div --&gt;
      &lt;md-autocomplete #auto="mdAutocomplete" [displayWith]="addressFormatter"&gt;
        &lt;md-option *ngFor="let address of addresses | async" [value]="address"&gt;
          {{ address.description }}
        &lt;/md-option&gt;
      &lt;/md-autocomplete&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, the options panel still appears right below the input and its position seems to be bound to that of the input...</p>