SfRichTextEditor not changing height responsively

Question

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

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 · Answer

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_App745574446Screenshot:
Please check the solution and let us know if the solution helps from your end.

Regards,Gunasekar

Stuart · Answer

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, StuartAttachment: HeightIssueWithRichTextEditor_ffbf0bf1.zip

Gunasekar Kuppusamy · Answer

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 · Answer

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 · Answer

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