Can't get the RTE to use scrollbars

[Michael]

Please find the page below.

---

I would like to have a RTE with IFrame that implements a max-height. In the page below, I have created 4 RTE-boxes with a max-height. Iframe, Iframe+resizable, Regular and Regular+resizable.

Unfortunately, none of the work as expected, as they all keep growing over the expensed max-height. The only one that works as expected is Regular+resizable, but only after changing the size manually.

Please advise how I can achieve a max-height.

---

@page "/SyncfusionTest"

@using Syncfusion.Blazor.RichTextEditor

<div class="row">

    <div class="col-6">

        <SfRichTextEditor EnableResize="true">

            <RichTextEditorIFrameSettings Enable="true" />

            <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

        </SfRichTextEditor>

    </div>

    <div class="col-6">

        <SfRichTextEditor EnableResize="true">

            <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

        </SfRichTextEditor>

    </div>

</div>

<hr />

<div class="row">

    <div class="col-6">

        <SfRichTextEditor>

            <RichTextEditorIFrameSettings Enable="true" />

            <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

        </SfRichTextEditor>

    </div>

    <div class="col-6">

        <SfRichTextEditor>

            <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

        </SfRichTextEditor>

    </div>

</div>

<style>

    .e-richtexteditor {

        max-height: 150px;

    }

</style>

[Vinothkumar Yuvaraj]

Hi Michael,

To meet your requirement, you can use the Height property of the Rich Text Editor along with a max height. This will help you set the height of the editor as per your specific needs. For your convenience, we have provided the following code snippet and attached a sample for your reference:

<SfRichTextEditor Height="150px" >

            <p> …… </p>

 </SfRichTextEditor>

<style>

    .e-richtexteditor {

        max-height: 150px;

    }

</style>

Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Height

Please let us know if you have any concerns.

Regards,

Vinothkumar

Attachment: BlazorApp1_56d78341.zip