We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't get the RTE to use scrollbars

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>


1 Reply

VY Vinothkumar Yuvaraj Syncfusion Team February 15, 2023 03:21 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon