控制角材料2自動完成選項面板的位置

我想控制角材料2自動完成選項面板的位置，並將此面板放置在與實際輸入的div不同的div中。控制角材料2自動完成選項面板的位置

這是我曾嘗試：

<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>

然而，選項面板仍出現正下方的輸入和它的位置似乎被綁定到輸入...

來源

2017-06-17 balteo

同樣的問題與日期選擇器... – balteo

我不確定這是否完全符合您的要求，但您可以通過操縱其父類來控制mat-calendar和mat-autocomplete-panel的位置。這些被覆蓋的類需要位於目標組件上方的水平才能生效。

實施例：

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

日期選擇器demo

自動填充demo

來源

2017-06-19 20:28:16 Nehal

非常感謝樣本@Nehal！你確認CSS是實現分離的唯一途徑嗎？ – balteo

是否有一種CSS方式將自動填充面板放置在給定的div中，而不是使用相對位置？ – balteo

嗨@balteo，我還沒有找到任何改變md-autocomplete的CSS屬性，而無需調整自己的關聯CSS類。這是唯一的解決方案，我可以拿出： – Nehal

可以控制角材料2自動完成選項面板的位置用下面的代碼

::ng-deep .mat-autocomplete-panel{ 

     }

來源

2017-10-31 01:06:15 ferralucho

這個答案不完整，請擴大您的答案。 –

控制角材料2自動完成選項面板的位置

回答

相關問題