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

最新推荐文章于 2024-03-13 10:41:43 发布

YuBooy

最新推荐文章于 2024-03-13 10:41:43 发布

阅读量716

点赞数

分类专栏： Angular笔记文章标签：前端 angular

本文链接：https://blog.csdn.net/qq_42183414/article/details/130131767

版权

Angular笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题：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;
}