css 无法使用Angular Flex布局设置ngx-quill编辑器的高度

imzjd6km  于 2023-04-01  发布在  Angular
关注(0)|答案(4)|浏览(177)

无法使用Angular 伸缩布局设置ngx-quill编辑器的高度。
编辑器的高度(灰色边框)超出了父div(红色背景)。
stackblitz
如何确保编辑器位于父div内部?

yqkkidmi

yqkkidmi1#

**解决方案:**由于某种原因,网上所有的解决方案都不起作用。说了一些关于“不安全的设置样式”的话,它们甚至不适用。

这个解决方案覆盖了Angular中的quill文本区域(你可以选择任何CSS文件,我只是喜欢我所有的Quill编辑器都是相同的大小)

  • src/styles.scss*
.ql-container {
     height: 300px !important;
 }
pgccezyw

pgccezyw2#

使用最新的quillngx-quill,并假设您可以使用::ng-deep,这可以工作:

::ng-deep .ql-editor {
    height: 300px;
}
yeotifhr

yeotifhr3#

解决方案是在ql-container类中覆盖height-

.ql-container {
  height: auto;
}

github链接

pod7payv

pod7payv4#

问题是height: 100%来自ql-container类,导致溢出。
只要添加以下css到您的代码,它将覆盖羽毛笔风格

.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%;
}

相关问题