Question

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

在文档的p下拉列表中，我找不到任何有用的东西。我这里可能有CSS-Option，对我有帮助吗？请指教。

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

Answer 1

尝试将此CSS添加到p下拉列表中：

bottom: 100%;

Answer 2

我看到，当用户单击组合框时，p下拉组件会创建一个类为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应用程序，因此您可以使用它：

随时问您有什么问题或疑问。

干杯！