1. Home
  2. Forum
  3. Blazor
  4. Markdown RichTextEditor in Modal SfDialog renders incorrectly.

Markdown RichTextEditor in Modal SfDialog renders incorrectly.

When using an SfRichTextEditor in Markdown Editor Mode inside of a SfDialog where IsModal is 'true', the height of the RTE does not render properly. I make calls to rteObj.RefreshUIAsync() in both the Created callback for the RTE and the Opened callback of the dialog, to no avail. When in Markup mode, the issue is not present.


The issue is reproduced in the following Syncfusion playground.


Please provide any insight as to how I can resolve this issue.


Thank you.


9 Replies
BT Bhuvaneshwari Thirunavukarasu Syncfusion Team March 7, 2025 12:44 PM UTC

Hi Hunter Malley,

Thank you for reaching out.

We have reviewed your query and found that the issue does not occur in our local environment but is reproducible in the online playground sample. This may be due to the editor's height being calculated before the dialog opens.


To resolve this, we recommend explicitly setting the Height property of the SfRichTextEditor.

Screenshot Reference:


Sample Link: https://blazorplayground.syncfusion.com/rjhoNqDQJIPNxLcy

Could you please try this solution and let us know if the issue persists?

Looking forward to your response.

Thanks,

Bhuvaneshwari T


HM Hunter Malley March 10, 2025 04:18 PM UTC

Thank you for your response.


I am looking to use the component to display content of varying heights and therefore do not want to set the height as a literal. Is there no way to have the height be calculated dynamically and be responsive? I assumed the calls to RefreshUIAsync() in the RTE Created() and Dialogue Opened() callbacks would recalculate the height.


Best,

Hunter



BT Bhuvaneshwari Thirunavukarasu Syncfusion Team March 11, 2025 08:41 AM UTC

Hi Hunter Malley,

As mentioned earlier, the issue does not occur in our local environment but is reproducible only in the online playground sample.

For your reference, we have attached the sample and a screenshot.


Could you please check this in your local environment and let us know if the issue is replicated locally?

Thanks,
Bhuvaneshwari T


Attachment: BlazorRTE_f7218a07.zip

HM Hunter Malley March 11, 2025 01:09 PM UTC

Good morning,


Thank you for including that sample. In the sample, it looks like a using statement for Syncfusion.Blazor.Popups is not included in the _Imports.razor. After adding that line so the content is actually presented in a Dialogue component, the issue is replicated for me locally. 


Is the issue replicated locally, on your end, when the Dialogue component is properly set up?


Best,

Hunter


HM Hunter Malley March 14, 2025 02:02 PM UTC

Hello,


I am just following up on this issue.


Best,

Hunter


BT Bhuvaneshwari Thirunavukarasu Syncfusion Team March 17, 2025 11:16 AM UTC

Hi Hunter Malley,
Thank you for your patience and for providing additional details.
We have reviewed your query and were able to reproduce the issue locally after adding Syncfusion.Blazor.Popups to the _Imports.razor file.
As a workaround, we recommend using the DialogOpen event to dynamically adjust the height by calling a JavaScript interop function. You can implement this as follows:
1. Invoke the JavaScript function inside the DialogOpen event in Blazor:
await JS.InvokeVoidAsync("adjustTextareaHeight", "benefits_editable-content");
2. Add the JavaScript function:
In your wwwroot/js/site.js (or any JavaScript file included in your Blazor project), add the following:
window.adjustTextareaHeight = (textareaId) => {
    let textarea = document.getElementById(textareaId);
    if (textarea) {
        textarea.style.height = "auto"; // Reset height to recalculate
        textarea.style.height = textarea.scrollHeight + "px"; // Set new height
    }
};
3. Ensure your JavaScript file is registered
Include your JavaScript file in the <head> section of index.html (for Blazor WebAssembly) or _Host.cshtml (for Blazor Server).
We have attached a sample project demonstrating this solution for your reference.

Screenshot reference:


Please try it and let us know if you need further assistance.
Best regards,
Bhuvaneshwari Thirunavukarasu



Attachment: BlazorRTE_a8496435.zip

HM Hunter Malley March 17, 2025 12:25 PM UTC

Thank you very much for providing that work around.


While that solution works, appropriately resizing the RTE on dialog open, it causes the form to be a bit jumpy when opened. The element first has the default height, and then jumps down to the correct, calculated height. 


Are there any plans to address this issue with the SfRichTextEditor in Markdown mode in a future patch?


Best,

Hunter


BT Bhuvaneshwari Thirunavukarasu Syncfusion Team March 18, 2025 11:38 AM UTC

Hi Hunter Malley,
We have considered the reported issue "Markdown RichTextEditor in Modal SfDialog Renders Incorrectly " as a bug from our end. The fix will be included in our upcoming patch release, which is scheduled for the first week of April.


Now you can track the status of the reported issue through this feedback,

 
Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”
 
Thanks,
Bhuvaneshwari T

BT Bhuvaneshwari Thirunavukarasu Syncfusion Team April 2, 2025 04:18 AM UTC

Hi Hunter Malley,
Query: Markdown RichTextEditor in Modal SfDialog Renders Incorrectly 
 
We have included the fix for the issue "Markdown RichTextEditor in Modal SfDialog Renders Incorrectly " with our package version 29.1.35. So, can you please upgrade your package to the latest to resolve the issue from your end?

Root cause: For markdown editor, we are setting the height manually by calculating the scroll height but when it rendered inside the dialog rte is not in the dom, height calculation will be zero
 
Regards
Bhuvaneshwari T

Loader.
Up arrow icon