ng-zorro 的布局问题 - 滚动时自动完成框不会停留在原位

Question

所以我在设置 NG-ZORRO 布局时遇到了问题

我有以下layout

HERE IS A STACKBLITZ EXAMPLE OF THE SETUP

HEADER应该固定在什么位置
当用户滚动内容时，SIDE NAVIGATION（左侧）也应该固定在适当的位置，但如果菜单项不适合屏幕，它也有一个内部滚动条
内容应该有内部滚动，这样

// WRAPPER
.wrapper {
  height: 100vh;
}

// HEADER
.header {
  color: white;
  background-color: rgb(24, 132, 255);
  height: 45px;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 999999;
  width: 100%;
}

// SIDE NAV MENU
[nz-menu] {
  line-height: 64px;
  height: 100vh;
  overflow: auto;
}

[nz-menu]::-webkit-scrollbar {
  display: none;
}

// CONTENT
.input {
  border: solid 1px rgb(24, 132, 255);
}

.before {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  background-color: rgb(184, 216, 208);
  opacity: 0.3;
  height: 300px;
  align-items: center;
}

.after {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  background-color: rgb(184, 185, 216);
  opacity: 0.3;
  height: 800px;
  align-items: center;
}

// HERE IS WHERE THE ISSUE IS
nz-content {
  padding: 0 50px;
  margin-top: 64px;
  // WE NEED THE OVERFLOW SO THAT ONLY THE CONTENT IS SCROLLABLE AND THE REST OF THE ELEMENTS ARE NOT
  overflow: auto;
}

<nz-layout class="wrapper">
  <!-- HEADER -->
  <header class="header">
    HEADER
  </header>
  <nz-layout class="content">
    <!-- SIDE NAVIGATION -->
    <nz-sider nzCollapsible nzWidth="200px">
      <ul nz-menu nzMode="inline" nzTheme="dark" class="menu-children">
        <li nz-menu-item>
          <span>Menu 0</span>
        </li>
        <li nz-submenu *ngFor="let item of menuItems" (nzOpen)="openMap.menu+item"
          (nzOpenChange)="openHandler('menu'+ item)" nzTitle="{{'Menu' + item}}">
          <ul>
            <li *ngFor="let submenuItem of menuItems" nz-menu-item>
              Menu {{submenuItem}}
            </li>
          </ul>
        </li>

        <li nz-menu-item (click)="openHandler('menu11')">
          <span>Templates</span>
        </li>
      </ul>
    </nz-sider>

    <!-- CONTENT -->
    <nz-content>
      <!-- ONLY CONTENT IN THE NZ-CONTENT SHOULD BE SCROLLABLE -->
      <p class="before">
        CONTENT BEFORE SEARCHBAR
      </p>

      <!-- SEARCHBAR + AUTOCOMPLETE -->
      <nz-input-group class="search-wrapper" nzSize="large">
        <!-- INPUT -->
        <input
          class="input"
          type="text"
          nz-input
          placeholder="Click here and scroll..."
          [nzAutocomplete]="auto"
        />

        <!-- AUTOCOMPLETE -->
        <nz-autocomplete #auto>
          <nz-auto-option [nzDisabled]="true">
            <span class="no-results"> No Results </span>
          </nz-auto-option>
        </nz-autocomplete>
      </nz-input-group>

      <p class="after">
        CONTENT AFTER SEARCHBAR
      </p>
    </nz-content>
  </nz-layout>
</nz-layout>

我的问题是，为了实现这一点，我已经使用 overflow: auto 设置了内容，并且一切都按预期工作......直到我添加了一个带有自动完成框的搜索栏。

现在，当您单击搜索框并在内容上滚动时，自动完成框会保留在原位，而不是固定在搜索栏的输入字段中 - see image

HERE IS A STACKBLITZ EXAMPLE OF THE SETUP

我能够做一些 hacky 解决方法，但它们不能 100% 工作。

有谁知道为什么用 overflow:auto 设置 nz-content 会破坏自动完成框的位置？！

Answer 1

好的，经过更多的研究，我找到了解决问题的有效方法。

原来是下面的

In the usage of tooltip (including popconfirm、popover), body element's scroll event will update the position of tooltip. It will never update the position of tooltip if the scroll event happens in a custom element.You can add cdkScrollable directive to achieve the goal. Take notice that you need to import relative package import {ScrollingModule} from '@angular/cdk/scrolling';, for more information you can visit scrolling/api.

source - ng-zorro (bottom of the page)

我还发现了这个关于 Material Design Autocomplete

的 Whosebug 问题

所以基于这两个，最终我将 ScrollingModule 导入到我的模块中，就像这样

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
   imports: [
   // ...
   ScrollingModule,
   ],
   // ...
 })
 export class MyAppModule { }

然后将 cdkScrollable 应用到 NZ-CONTENT

<nz-content cdkScrollable> CONTENT GOES HERE </nz-content>

Here is a link with the working solution - line 37

ng-zorro 的布局问题 - 滚动时自动完成框不会停留在原位

Issue with ng-zorro's layout - autocomplete box does not stay in position when scrolling

css

layout

ng-zorro-antd