I am using MudExRichTextEdit package in my Company's project, and as a new developer I always want to ask, and have to ask If I am in a dire situation. Currently with this rich text editor, I am not finding anywhere the possibility to make this rich editor grow in terms of our need, in terms of how much text it contains, or even screenshots/photos. Currently we can only do that by giving the editor a base min-height, but it doesn't auto grow. It only gives the possibility of a scroll option inside the editor, but that does not work with what we need to accomplish. We also want to print the form page we have created, and it doesn't show the whole picture/text inside the editor. Has anyone had issues of this kind?
The rich editor implementation looks like this :
<MudExRichTextEdit For="@(() => Model!.CurrentState)"
Value="@Model!.CurrentState"
Immediate="true"
Height="300"
Placeholder="">
</MudExRichTextEdit>
I would gladly appreciate the help!
To solve your issue you can style the .ql-container
class and remove the Height
property from the MudExRichTextEdit
component.
And the css that you need so that it grows, set the min-height
and max-height
<style>
.ql-container {
min-height:20px;
max-height:600px;
}
</style>
<MudExRichTextEdit @ref="_editor"
Modules="@_modules"
ReadOnly="@_readOnly"
Immediate="@_updateValueOnChange"
EnableResize="true"
CustomUploadFunc="OnUpload"
Files="@_files"
Class="m-2"
@bind-Value="@_value"
Placeholder="Write here">
</MudExRichTextEdit>
FYI this is an extension component and wasn't created by MudBlazor team. https://github.com/fgilde/MudExRichTextEditor