SfRichTextEditor not changing height responsively

[Stuart]

Hi,

I can't seem to get the SfRichTextEditor to scale vertically with the parent element using this code.

<div class="col-md-6 my-2 d-flex border" style="height: calc(100vh / 2 - 20rem);">
   <SfRichTextEditor Height="100%" Width="100%" @bind-Value="@MyProduct.Description">
   </SfRichTextEditor>
</div>

The SfRichTextEditor does scale in the horizontal direction OK.

The code above works fine with the SfListView and SfGrid controls.

Can you let me know what I am doing wrong here?

Many thanks, Stuart

[Gunasekar Kuppusamy]

Hi Stuart,

Greetings from Syncfusion support.

We have validated your reported issue with your shared code. In you shared code,  style="height: calc(100vh / 2 - 20rem);" style does not have the proper height in the DOM. Because of this, RichTextEditor is not scaled vertically. We have also ensured in the SfListView and SfGrid controls.

So, we suggest you that, apply the Static height to the parent element. We have prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/169148/ze/Blazor_App745574446

Screenshot:

Please check the solution and let us know if the solution helps from your end.

Regards,

Gunasekar

[Stuart]

Hi Gunasekar,

To be clear the following code does work in the SfListView and SfGrid controls.

style="height: calc(100vh / 2 - 20rem);"

But does not work in the SfRichTextEditor control.

The attached screenshot shows this working correctly with the SfListView control but NOT with the SfRichTextEditor control.

Do you know why is this behaviour different?

I have attached a screenshot and a simple Blazor project showing the issue. 

Many thanks, Stuart

Attachment: HeightIssueWithRichTextEditor_ffbf0bf1.zip

[Gunasekar Kuppusamy]

Hi Stuart,

Good day to you.

We have further validated your reported query from our end.

We have checked your modified sample. When run the sample, the height is set to RichTextEditor properly.

Video Reference: https://www.syncfusion.com/downloads/support/forum/169148/ze/Video247355307

Sample: https://www.syncfusion.com/downloads/support/forum/169148/ze/Blazor_App965909732

Also, we noticed, when change the screen resolution dynamically ,we can reproduce the reported issue. We suspect RichTextEditor height is not properly in your case. To resolve this issue, we suggest you that call the RefreshUI method in the Created event.

We have modified the sample for your reference.

Code Snippets:

 <SfRichTextEditor @ref="RteObj" Height="100%" Width="100%">

    <RichTextEditorEvents Created="OnCreate"></RichTextEditorEvents>

</SfRichTextEditor>

@code {

    SfRichTextEditor RteObj;

    public async Task OnCreate()

    {

        {

            await RteObj.RefreshUI();

        }

    }

}

Still if you are facing the issue, please share the following details,

• Screen resolution of your machine.
• Is issue reproduced initial rendering or when changing resolution

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Gunasekar 

[Stuart]

Hi Gunasekar, I have now fixed this by using your suggestion as follows;

1) Added the following nuget package to the project

BlazorPro.BlazorSize

2) Added the following to startup.cs

services.AddScoped<IResizeListener, ResizeListener>();

3) Injected the service on the page in question (I'm using code behind)

[Inject] private IResizeListener _listener { get; set; }

4) Added the following code to update the component on page resize

private SfRichTextEditor _rteDescription;
private async void WindowResizedAsync(object _, BrowserWindowSize window) => await _rteDescription.RefreshUI();
protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
        _listener.OnResized += WindowResizedAsync;
}

This now works fine, I hope this helps anyone else out that is having this problem. Thank you for all your wonderful assistance.

Kind regards, Stuart

[Gunasekar Kuppusamy]

 Hi Stuart, 

Thanks for the information.

We are glad that the provided solution helps from your end. Please let us know if you need further assistance. 

 

Regards, 

Gunasekar