【问题集】div滚动时，里面的ng-zorro date-picker控件面板脱离

最新推荐文章于 2022-08-11 09:38:21 发布
最新推荐文章于 2022-08-11 09:38:21 发布
阅读量857 收藏
点赞数
分类专栏： angular 文章标签： ng-zorro  date-picker scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfangfang11/article/details/85259380
版权

【需求】页面数据过滤时有时间选项，以下拉框的形式给定几个常用值以及自定义选项，自定义时间选择使用的是ng-zorro date-picker控件；

【问题】当承载的div 内容过长时，会出现滚动，而此时展开的时间面板会与标题位置脱离，不会随页面滚动重新定位；

【解决办法】在出现滚动的div上增加cdk-scrollable。

  参考：https://github.com/angular/material2/issues/6157

 

ykyexin
关注
专栏目录
对 scroll 的认知和探索
Kate_sicheng的博客
11-02 1009
由于浏览器对于滚动 scrollLeft 在 RTL 中的含义并不一致，CdkScrollable的scrollTo方法对浏览器原生scrollTo方法进行了规范化：left 和 right 总是指滚动容器的左侧和右侧，而与布局方向无关。第三，当元素上绑定了CdkScrollable指令，该指令会调用scrollDispatcher的register方法，将该scrollable引用及它对应的滚动事件订阅作为键值对注册到scrollContainers字典中。：读取或设置一个元素的内容垂直滚动的距离。
angular+ng-zorro使用中下拉框悬浮问题
weixin_58873157的博客
12-30 918
下拉框悬浮 引入了样式但下拉框还是飘走了 解决方法： 1、下载 npm install @angular/animations 2、在App.module.ts中引入 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserAnimationsModule ] }） 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，
RXJS解决NGZORRO下拉框组件漂移的问题
dongnihao的博客
08-11 615
Subscription是一个对象，表示一种可被处置的资源，通常指代一个Observable流的执行过程。Subscription有一个重要的方法unsubscribe()，不需要参数，仅仅用来释放掉subscription实例所...问题描述：使用Angular+NGZORO时候，组件库的下拉框或时间选择框会出现滚动页面，然后漂移的问题。实际的想法是，滚动页面的时候，要么下拉框消失，要么随着页面滚动。那么想法就是，当用户滚动的时候会发出一个流stream，以此创建一个可观察对象observable。...
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3299
关于el-select下拉框不跟随页面滚动
Angular cdk 学习之 Scrolling
旧路
12-15 8231
       Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件。推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scrolling/overview        想要在我们项目中使用cdk Scrolling功能，需要在我们模块...
jQuery滚动插件scrollable
12-03
Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容（HTML、视频、文件、图片等...）都可以作为一个滚动项。支持水平与垂直两种滚动方向。用途：滚动效果，可制作分步验证页面
关于angular引入ng-zorro的问题浅析
10-14
`--save`参数会把ng-zorro-antd记录在package.json文件的dependencies中，这样在后续的开发环境中，ng-zorro-antd将被自动管理。 接下来，需要在项目的核心模块`app.module.ts`中导入`NgZorroAntdModule`。这一步至...
demo-ng-zorro-antd:基于ng-zorro-antd的后台管理系统，支持国际化
03-11
Demo-ng-Zorro-antd 示例运行步骤： 克隆到本地 ：文件夹 安装依赖包： npm install 本地运行： npm start ：浏览器输入地址： http://localhost:4200 屏幕截图 支持国际化，中英文切换
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
在Angular开发过程中，使用ng-zorro作为前端UI框架时，可能会遇到部分图标无法正常显示的问题。这通常是由于未正确导入和注册图标导致的。ng-zorro图标库包含了大量的图标资源，但默认情况下，ng-alain项目仅预导入...
ng-alain：NG-ZORRO管理面板前端框架（浪涌镜像https：ng-alain-doc.surge.sh）
01-31
基于ng-zorro-antd 响应式布局 I18n 惰性负载资产 UI路由器状态 自定义主题 更少的预处理器 RTL 井井有条的代码 简单升级 支持Docker部署 建筑 是基于Ant Design开发的设计原则构建的，适用于管理业务组件包的...
ng-zorro-antd-demo:基于阿里巴巴ng-zorro-antd写的后台管理系统模版，后台采用spring cloud实现
03-11
为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng ...
Angular中修改第三方组件的样式 - zorro日期选择器右端不对齐的BUG
weixin_33695450的博客
02-20 715
在一列上同时使用zorro的日期选择器和input组件会出现右端不对齐的BUG（nzSpan设置为一样） 上图中3个表单项：单据日期、开票、交货方式，nzSpan数值是一样的，可以看到日期选择器和下面的“交货方式”右端没有对齐 在浏览器控制台中层层展开后到达下面的路径： 可以看到ant-calendar-picker是日期选择器组件的...
angular+ant ng-zorro 自定义滚动条简单使用
lucky_star01的博客
04-01 1326
angular+ant ng-zorro 自定义滚动条简单使用设置scrollbar宽度 设置scrollbar宽度 :host::ng-deep .ant-table-body::-webkit-scrollbar { width: 8px; height: 8px; }
10分钟快速上手angular cdk
weixin_34310127的博客
04-07 992
coercion 常用类型转换工具 @angular/cdk/coercion 常用类型转换工具 import { Component, OnInit } from "@angular/core"; import { coerceArray, coerceBooleanProperty, coerceNumberProperty, _isNumberValue } from "...
angular6+ ng-zorro实现下拉列表的多选功能
kksw1121
02-20 4458
<nz-select style="width: 100%" nzMode="multiple" nzPlaceHolder="Please select" [(ngModel)]="listOfSelectedValue"> <nz-option *ngFor="let option of listOfOption" [nzLabel]="op
CSS3自定义滚动条样式
04-19 4154
有的公司或许会要求做个好看的滚动条，这时候，我们就需要来自定义滚动条，但是IE跟别的是不一样的。所以，在下面的文章中，会有两种不同的方式来自定义滚动条样式。 webkit浏览器css设置滚动条：（下面是他的7个主要的属性） ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮（滚动条轨
datepicker设置插件显示位置
热门推荐
johnhuster的专栏
10-18 1万+
datepicker设置插件显示位置
angular7 ng-zorro框架的列表实现前端分页
weixin_42716945的博客
08-26 1281
废话就不多写了 html页面代码如下： <nz-table #basicTable [nzData]="listOfData.data" (nzPageIndexChange)="listOfData.pageIndexChange($event)" [nzScroll]="{ y: '240px' }" [nzFrontPagination]="false" [nzTotal]="listOfData.total" [(nzPageIndex)]="listOfData.pageIndex"
隐藏与修改滚动条样式
cxzlp0521的博客
11-21 417
1.隐藏滚动条(只是隐藏滚动条，页面仍可移动) /* 谷歌、苹果浏览器 */ ::-webkit-scrollbar { display: none; } /* IE浏览器 */ ::-ms-scrollbar { display: none; } /* 火狐浏览器 */ ::-moz-scrollbar { display: none; } /* 欧朋浏览器 *...
angular安装ng-zorro-antd/date-picker
最新发布
06-11
要在 Angular 项目中安装 ng-zorro-antd/date-picker 模块，需要按照以下步骤进行： 1. 首先，确保你的 Angular 项目已经安装了 ng-zorro-antd 包。如果没有安装，可以使用以下命令进行安装： ``` npm install ng-zorro-antd --save ``` 2. 然后，在你的 Angular 项目中，找到 app.module.ts 文件，将 NgZorroAntdModule 模块导入到该文件中： ``` import { NgZorroAntdModule } from 'ng-zorro-antd'; @NgModule({ imports: [ NgZorroAntdModule ], ... }) export class AppModule { } ``` 3. 最后，在你的组件模板中使用 <nz-date-picker> 标签来创建日期选择器。例如： ``` <nz-date-picker [(ngModel)]="selectedDate"></nz-date-picker> ``` 在组件的代码中，你可以使用 selectedDate 变量来获取用户选择的日期。 希望这些步骤可以帮助你成功安装 ng-zorro-antd/date-picker 模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值