> 文章列表 > Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】

Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】

Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】

问题:Angular 全屏后选择器 (nz-select) 下拉选择无法使用

如图:

 

 

相应解决方法的文章:https://medium.com/@shahar.kazaz/adding-fullscreen-support-to-ng-zorro-a38140da676

三种解决方法:

① FullscreenOverlyContainer:但15版本才支持;

② css样式逻辑全屏;

③ @ngneat/dialog:但 ng-zorro 不支持。


问题的原因及解决方案

 最终解决方案:select, popover 下拉列表弹出层 某些情况不显示 · Issue #2172 · NG-ZORRO/ng-zorro-antd · GitHub

 

即:使用:request(document.body) {

                                                                const target = document.body;

                                                                sf.request(target);

                                                          }

而不是 request(document.getElementById("full-screen"));

先 request body 让整个 document 全屏,然后再让选定的 div css 占满整个屏:

<div class="{{ isScreenFull ? 'css-full' : '' }}"> <body> </div>.css-full {position: fixed;width: 100%;height: 100%;left: 0;top: 0;
}