angular - 如何告诉下拉列表始终扩展到顶部

Question

我在 p 表的页脚中有一个 p 下拉列表。这些是 PrimeNg 组件。我注意到下拉菜单有时会向顶部打开，在这种特殊情况下我喜欢这种情况，并且我想强制它始终向顶部打开。

在 p-dropdown 的文档中我找不到任何有用的东西。我可能有一个 CSS 选项可以帮助我吗？请指教。

<p-dropdown [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>

Answer 1

我看到，当用户单击组合框时，p-dropdown 组件会创建一个带有类 ui-dropdown-panel (以及其他)的 div 以显示可滚动的选项列表。根据组件的位置，它将显示在其下方或上方(默认情况下，它位于下方)以避免溢出。默认情况下，当下拉 div 显示在组合上时，它的位置是使用以下 CSS 样式隐式设置的:

top: -202px;
left: 0px;

因此，也许您可​​以使用一些 CSS 强制 top 属性始终为 -202px:

1 将特殊类应用于组件以在其上显示列表:

<p-dropdown styleClass="showAbove" [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>

2 在组件的 CSS 文件中，设置下拉 div 的默认位置:

.ui-dropdown.showAbove .ui-dropdown-panel {
  top: -202px !important;
}

编辑: 这不起作用，组件将 202px 减去我们在上面 CSS 中设置的 -202px，因此它显示上面的面板 404px。另一种方法可能是处理 onClick 事件并使用 Angular Renderer2 更改 div top 值。当我有时间时我会做一些测试，然后发布更新。

建议的解决方案: 抱歉耽搁了，我最近没有太多空闲时间...为了向您展示一个可行的解决方案，我做了一个小小的 Stackblitz 应用程序，以便您可以使用它:

https://stackblitz.com/edit/github-2nwkvt

如有任何问题或疑问，请随时提出。

干杯!