无法使用Angular 伸缩布局设置ngx-quill编辑器的高度。编辑器的高度(灰色边框)超出了父div(红色背景)。stackblitz如何确保编辑器位于父div内部?
yqkkidmi1#
**解决方案:**由于某种原因,网上所有的解决方案都不起作用。说了一些关于“不安全的设置样式”的话,它们甚至不适用。
这个解决方案覆盖了Angular中的quill文本区域(你可以选择任何CSS文件,我只是喜欢我所有的Quill编辑器都是相同的大小)
.ql-container { height: 300px !important; }
pgccezyw2#
使用最新的quill和ngx-quill,并假设您可以使用::ng-deep,这可以工作:
quill
ngx-quill
::ng-deep
::ng-deep .ql-editor { height: 300px; }
yeotifhr3#
解决方案是在ql-container类中覆盖height-
ql-container
height
.ql-container { height: auto; }
github链接
pod7payv4#
问题是height: 100%来自ql-container类,导致溢出。只要添加以下css到您的代码,它将覆盖羽毛笔风格
height: 100%
.ql-container { min-height: 10rem; height: 100%; flex: 1; display: flex; flex-direction: column; } .ql-editor { height: 100%; flex: 1; overflow-y: auto; width: 100%; }
4条答案
按热度按时间yqkkidmi1#
**解决方案:**由于某种原因,网上所有的解决方案都不起作用。说了一些关于“不安全的设置样式”的话,它们甚至不适用。
这个解决方案覆盖了Angular中的quill文本区域(你可以选择任何CSS文件,我只是喜欢我所有的Quill编辑器都是相同的大小)
pgccezyw2#
使用最新的
quill
和ngx-quill
,并假设您可以使用::ng-deep
,这可以工作:yeotifhr3#
解决方案是在
ql-container
类中覆盖height
-github链接
pod7payv4#
问题是
height: 100%
来自ql-container
类,导致溢出。只要添加以下css到您的代码,它将覆盖羽毛笔风格