控制角材料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自动完成选项面板的位置

回答

相关问题