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

news2024/12/24 2:29:08

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/418189.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SAP中用CS20批量修改BOM应用问题处理实例

在应用中可能会遇到这样的情况&#xff0c;用户通过某个工艺或技术上的改进&#xff0c;节约了某个原料的用量&#xff0c;而这个原料可能应用在一批成品上。如果成品数量太大&#xff0c;就需要做批量的变更了。 CS20这个事务应该就是用于做BOM批量处理的&#xff0c;笔者之前…

C++基础回顾(上)

C基础回顾&#xff08;上&#xff09; 目录C基础回顾&#xff08;上&#xff09;前言关键字和标识符运算符数据类型函数类前言 C之前学过一点&#xff0c;但是很长时间都没用过&#xff0c;翻出了书从头看了一遍&#xff0c;简短地做了笔记&#xff0c;以便自己之后查看和学习…

5、存储引擎

1、查看存储引擎 查看mysql提供什么存储引擎&#xff1a; show engines;2、设置系统默认的存储引擎 查看默认的存储引擎&#xff1a; show variables like %storage_engine%; #或 SELECT default_storage_engine;修改默认的存储引擎 如果在创建表的语句中没有显式指定表的存…

教你精通Java语法之第十二章、递归

目录 一、递归 1.1递归的概念 1.1.1定义 1.1.2原理 1.1.3思路 1.2单路递归 1.2.1阶乘 1.2.2正向输出数字 1.2.3反向输出字符串 1.3多路递归 1.3.1斐波那契数列 1.3.2兔子问题 1.3.3青蛙爬楼梯 1.4汉诺塔问题 1.5猴子吃桃问题 1.6老鼠走迷宫问题 二、递归的时…

从视频中截取gif怎么弄?三步简单完成视频转gif制作

电影、电视剧等短视频充斥着我们的生活&#xff0c;很多小伙伴会将这些视频中的有趣画面提取出来做成Gif动画表情包。那么&#xff0c;怎么才能从视频中提取gif动画呢&#xff1f; 一、使用什么工具才能从视频中提取gif呢&#xff1f; 通过使用GIF中文网这款专业的视频转gif&…

RabbitMQ (工作队列:Work Queues)

本章目录&#xff1a; 什么是Work Queues模拟场景&#xff0c;使用Work Queues官网文档&#xff1a;RabbitMQ tutorial - Work Queues — RabbitMQ 一、何为Work Queues 我们先看下它的结构图 显然&#xff0c;它与入门案例相比只是多了几个消费者。 以下是官方文档说明 In …

【目标检测】目标检测遇上知识图谱:Object detection meets knowledge graphs论文解读与复现

前言 常规的目标检测往往是根据图像的特征来捕捉出目标信息&#xff0c;那么是否有办法加入一些先验信息来提升目标检测的精准度&#xff1f; 一种可行的思路是在目标检测的输出加入目标之间的关联信息&#xff0c;从而对目标进行干涉。 2017年8月&#xff0c;新加波管理大学…

Vue——插槽

目录 插槽内容与出口​ 渲染作用域​ 默认内容​ 具名插槽​ 动态插槽名​ 作用域插槽​ 具名作用域插槽​ 高级列表组件示例​ 无渲染组件​ 插槽内容与出口​ 在之前的章节中&#xff0c;我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;…

微信小程序 | 基于ChatGPT实现电影推荐小程序

文章目录** 效果预览 **1、根据电影明星推荐2、根据兴趣标签推荐3、根据电影名推荐一、需求背景二、项目原理及架构2.1 实现原理&#xff08;1&#xff09;根据用户的兴趣标签&#xff08;2&#xff09;根据关联类似主题的题材&#xff08;3&#xff09;根据特定的电影明星2.2 …

IK集成ElasticSearch,IK分词器的下载及使用

IK集成ElasticSearch&#xff0c;IK分词器的下载及使用 下载ElasticSearch 8.7.0网址&#xff1a;Download Elasticsearch | Elastic 历史版本地址&#xff1a;Past Releases of Elastic Stack Software | Elastic 解压ElasticSearch 什么是IK分词器 分词∶即把一段中文或…

IO流基础

目录 1.FileOutPutStream字节输入流 1.1FileOutPutStream使用 1.1.1创建对象 FileOutPutStream fos new FileOutPutStream("路径或者File对象")&#xff1b; 1.1.2.写数据 调用write方法&#xff0c;参数是int类型&#xff0c;但传入文件中是asci…

【LeetCode: 剑指 Offer II 112. 最长递增路径 | 递归 | DFS | 深度优先遍历 | 记忆化缓存表】

&#x1f34e;作者简介&#xff1a;硕风和炜&#xff0c;CSDN-Java领域新星创作者&#x1f3c6;&#xff0c;保研|国家奖学金|高中学习JAVA|大学完善JAVA开发技术栈|面试刷题|面经八股文|经验分享|好用的网站工具分享&#x1f48e;&#x1f48e;&#x1f48e; &#x1f34e;座右…

海康工业相机网口相机丢包问题解决方法

​1.1 系统环境设置 1.1.1 网卡设置 网卡推荐使 Intel 芯片的独立千兆网口,例如 intel I350、I210 等芯片组网卡 设置网卡巨型帧为选择 9KB 或 9014 字节 *不同网卡类型,网卡属性有差异,需灵活参考 设置网卡接收与传输缓存区到最大(intel 网卡一般为 2048,realtek 一般…

Program tuning - Druid和Linux配合优化数据库连接池配置

Program tuning - Druid和Linux配合优化数据库连接池配置配置步骤1. 添加依赖2. 添加配置3. 启动监控界面常见问题输入地址之后&#xff0c;浏览器直接打印html代码&#xff0c;而不是登录框刷新页面不能重新加载数据调优步骤1. 开始压测2. 监控线程池状态3. 查看服务器状态结论…

算法 贪心5 || 435. 无重叠区间 763.划分字母区间 56. 合并区间 738.单调递增的数字 968.监控二叉树

435. 无重叠区间 和452. 用最少数量的箭引爆气球 思路是很相似的。本题按照左边排序或者按照右边排序都是可以的&#xff0c;最终目的都是为了让区间尽可能重叠。 1、按右边排序&#xff0c;排序完第一个元素的右边界一定是最小右边界。往下找第一个不与其重合的左边界&#x…

亚马逊云科技为全球的可持续发展进程做出贡献

可持续发展是一个涉及经济、环境和社会三个方面的复杂问题。经济发展必须在保护环境和社会公正的前提下进行&#xff0c;这样才能实现真正的可持续发展。为了实现这一目标&#xff0c;人们需要借助技术手段&#xff0c;更好地理解和解决环境和社会问题。 亚马逊云科技是全球领…

nssctf web入门(2)

目录 [SWPUCTF 2021 新生赛]easy_md5 [SWPUCTF 2021 新生赛]include [SWPUCTF 2021 新生赛]PseudoProtocols 这里通过nssctf的题单web安全入门来写&#xff0c;会按照题单详细解释每题。题单在NSSCTF中。 想入门ctfweb的可以看这个系列&#xff0c;之后会一直出这个题单的解…

到了这个年纪,就应该阅读Spring源码了,源码阅读指南-编译加运行

文章目录到了那个年纪&#xff0c;就应该阅读Spring源码了&#x1f604;第一步&#xff0c;clone&#x1f606;第二步&#xff0c;使用idea打开项目&#x1f60a;gradle介绍&#xff08;插叙手法&#xff09;&#x1f603;第三步&#xff0c;修改gradle的远程仓库地址&#x1f…

Day932.5个步骤,高效推动组件化架构重构 -系统重构实战

5个步骤&#xff0c;高效推动组件化架构重构 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录都是关于5个步骤&#xff0c;高效推动组件化架构重构的内容。 项目的架构设计是一回事&#xff0c;代码落地又是另外一回事&#xff0c;很多架构设计最终都只是落在了 PPT 上。 一…

QT Graphics View坐标系转换

背景 在做绘图处理时&#xff0c;Scence作为场景&#xff0c;大小是无限的&#xff0c;而View作为一个观察镜头&#xff0c;观察范围是有限的。 那么有限的View观察无限的Scence区域&#xff0c;必然要选定一个观测锚点。 所以View具有一个centerOn(QPointF pos)函数&#xff…