时间戳

首页 > 解决方案 > 带有下拉菜单的 PrimeNG 工具栏按钮出现在错误的位置

javascript - 带有下拉菜单的 PrimeNG 工具栏按钮出现在错误的位置

问题描述

我在这里制作了一个 stackblitz 示例来说明问题： https ://stackblitz.com/edit/primeng-toolbar-demo-u21zmt?file=src%2Fapp%2Fapp.component.html

单击删除按钮时，弹出菜单显示在错误的位置。

演示

我不想每次我想使用它时都必须编写自定义 CSS 来定位菜单。

我究竟做错了什么？

标签： javascriptprimengprimeng-menu

解决方案

切换您的html中的顺序

    <p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
      (click)="removeMenu.toggle($event)"></p-button>
    <p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>

变成

    <p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
    <p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
      (click)="removeMenu.toggle($event)"></p-button>

这将使菜单出现在“删除”下

推荐阅读