Enhancement for autocomplete & datepicker: allow for positionning the options/calendar panel elsewhere than next to the input

Bug, feature request, or proposal:

Proposal for enhancement for autocomplete & datepicker

What is the expected behavior?

Panel for autocomplete options or datepicker calendar can be positionned elsewhere than next to their related input field.

What is the current behavior?

Panel for autocomplete options or datepicker calendar cannot be positionned elsewhere than next to their related input field.

What are the steps to reproduce?

<div fxLayout="row">
  <div fxFlex="50">
    <form [formGroup]="formStatus.form">
      <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>

What is the use-case or motivation for changing an existing behavior?

Autocomplete and datepicker usage will be more flexible

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular material: 2.0.0-beta.6

If I am wrong and this feature is currently available, maybe a update to the documentation would be worthwhile.

[willshowell]

Seems like this could be useful for a search like inbox’s

[renestalder]

For a start, I would be happy to deactivate the automatic positioning based on space. Like having an option for positioning:

• auto: Current behavior
• bottom: force to always show below the input field
• top: force to always show above the input field
• custom: What this whole issue ticket is suggesting