角材料-自动完成组件下拉部分不粘在输入字段上 [英] Angular material - autocomplete component dropdown section does not stick to the input field

问题描述

在MatDialog组件内，来自角材料的自动完成组件无法按预期工作.自动完成组件的drpodown部分不会粘贴到输入字段.

The autocomplete component from angular-material is not working as expected inside the MatDialog component. The drpodown section from autocomplete component does not stick to the input field.

stackblitz链接-示例

stackblitz link - example

复制-跳转到stackblitz上方.点击打开弹出窗口"按钮.单击选择一个"自动完成字段.这些选项将作为下拉列表打开.然后滚动弹出菜单.请注意，自动完成"组件的下拉部分并不遵循输入字段.我该如何解决?

to reproduce - Goto above stackblitz. Click on "open popup" button. Click on the "Pick One" autocomplete field. The options will open as dropdown. Then scroll the bodu of popup. Notice the dropdown section of autocomplete component does not stick to the input field. How do I fix this?

推荐答案

在滚动div中添加cdkScrollable.

• 在app.module.ts中导入ScrollingModule
• 将cdkScrollable添加到滚动div

• Import ScrollingModule in app.module.ts
• Add cdkScrollable to the scrolling div

<div style="width: 300px; height: 100px; border: 1px solid red; overflow-y: auto;" cdkScrollable>
 <p>Angular Material, the ultimate design</p>
 <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let option of options" [value]="option">
     {{option}}
   </mat-option>
 </mat-autocomplete>
 <p>Angular Material, the ultimate design</p>
</div>

这篇关于角材料-自动完成组件下拉部分不粘在输入字段上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！