如何將菜單欄的 prime ng 子菜單右對齊？

Question

我有側欄和水平導航欄。 我使用 prime ng（版本 9.1.3）菜單欄。

導航欄組件.html

  <p-menubar [model]="items"></p-menubar>

導航欄組件.ts

export class NavBarComponent implements OnInit { 

  items: MenuItem[];

  constructor() {
    
  }

  ngOnInit() {
    this.items = [
      {
        label: "User",
        icon: "pi pi-fw pi-user",
        items: [
          { label: "Profile", icon: "pi pi-fw pi-user" },
          { label: "Change Password", icon: "pi pi-fw pi-cog" },
          { label: "Log Out", icon: "pi pi-fw pi-power-off" },
        ],
      },
    ];
  }
}

導航欄組件.scss

:host ::ng-deep .ui-menubar .ui-menubar-root-list {
  float: right;
}

菜單欄的子菜單退出屏幕。 我們怎樣才能糾正這個問題？

Answer 1

您可以嘗試使用right: 0 。

styles.css

.align-right .p-menubar-root-list>li:last-child .p-submenu-list {
  right: 0;
}

.html

<p-menubar [model]="items" styleClass="align-right"> <!-- declare class here -->
    <div>
        <input type="text" pInputText placeholder="Search">
        <button type="button" pButton label="Logout" icon="pi pi-power-off" style="margin-left:.25em"></button>
    </div>
</p-menubar>

演示在這里！

Answer 2

問題是 html 上的 y 軸有溢出：

在全局 css 上使用它：

body, html {
  overflow-y: hidden;
}

Answer 3

在您的組件 css 文件 (YOUR-COMPONENT-NAME.component.css) 中添加以下內容

::ng-deep .p-menubar .p-submenu-list {
  display: none;
  position: absolute;
  z-index: 1;
  right: 0;
}