search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.86k stars 3.91k forks source link

nz-select 在固定表头的表格中使用，表格滚动时，nz-select 的下拉框和输入框分离 #6956

Closed castelain closed 3 years ago

castelain commented 3 years ago

Reproduction link

https://stackblitz.com/edit/angular-uf44ee?file=src%2Fapp%2Fapp.component.html

Steps to reproduce

  1. 创建表格
  2. 固定表格的表头
  3. 把表格的行改为可编辑的行
  4. 可编辑的行中使用 nz-select 组件
  5. 触发行编辑状态，打开 select 下拉框，滚动表格
  6. 能看到 select 框和 下拉选项框分离了（下拉选项框的 top 样式属性值没有更新）

What is expected?

下拉选项框和 select 框不分离，可以一起随表格滚动；或者，在有未关闭的 select 下拉选项弹框时，能禁止滚动

What is actually happening?

nz-select 在固定表头的表格中使用，表格滚动时，nz-select 的下拉选项框和 select 框分离

Environment Info
ng-zorro-antd 11.4.2
Browser chrome V92
zorro-bot[bot] commented 3 years ago

Translation of this issue:

NZ-SELECT is used in the form of a fixed header, and the table is separated when the table is scrolled, and the drop-down box and input box of NZ-SELECT are separated.

reproduction link

[https://stackblitz.com/edit/angular-uf44ee?file=src%2fapp%2fapp.component.html](https://stackblitz.com/edit/angular-uf44ee?file=src%2fapp%2fapp. Component.html)

steps to reproduce

Create a form

  1. Fixed table head
  2. Turn the form of the table to editable line
  3. Use NZ-SELECT components in editable rows
  4. Touch the editing status, open the SELECT drop-down box, scroll the table
  5. You can see the SELECT box and drop-down option box (the drop-down option box is not updated)

What is expected?

The drop-down option box and the SELECT box are not separated, you can scroll together with the table with the table; or, you can ban scrolling when there is a SELECT drop-down options that have not been closed.

What is actually happens?

NZ-SELECT is used in the form of a fixed header, the table is scrolled, and the NZ-SELECT pull-down option box and the SELECT box are separated.

ENVIRONMENT INFO
Ng-Zorro-ANTD 11.4.2
Browser Chrome V92
AlaneLiang commented 3 years ago

This is my solution:

add [nzBackdrop]="true" to nz-select component. when you open select option list, it will block outside scroll control.

castelain commented 3 years ago

Thank you for your reply. This plan can meet my needs.

------------------ 原始邮件 ------------------ 发件人: "NG-ZORRO/ng-zorro-antd" @.>; 发送时间: 2021年8月30日(星期一) 下午2:45 @.>; @.**@*.**@*.***>; 主题: Re: [NG-ZORRO/ng-zorro-antd] nz-select 在固定表头的表格中使用，表格滚动时，nz-select 的下拉框和输入框分离 (#6956)

This is my solution:

add [nzBackdrop]="true" to nz-select component. when you open select option list, it will block outside scroll control.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.