Search code examples
c#rich-text-editormudblazor

Is it possible to make MudExRichTextEdit textarea (editor) bigger/grow in terms of our need?


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!


Solution

  • To solve your issue you can style the .ql-container class and remove the Height property from the MudExRichTextEdit component.

    console elements

    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>
    

    Demo

    Gif demo


    FYI this is an extension component and wasn't created by MudBlazor team. https://github.com/fgilde/MudExRichTextEditor