RichTextEditor toolbar is not in correct location when viewing existing data

[David Adler]

I am using the Blazor RichTextEditor in SynFusion.Blazor v18.1.0.43. Then I display my Create New Product form, the RTE toolbar displays in the correct location at the top of the SfRichTextEditor component. However, if I retrieve a record and bind that records class property to the RTE, the toolbar drops down from the top of the component leaving a large blank space between the top of the RTE component and the toolbar, with the text from the bound field displayed below the toolbar.

I have attached screenshots of my Create New Product form, showing the RTE control with no existing data and my Manage Product form, showing the RTE populated with existing data.

Also, for the ManageProduct.razor.cs file, if I just populated the ExistingProduct model with the data retrieved from my backend data store, the text for the Description field did not display in the RTE control. The same issue with the toolbar dropping down occurred, but the data did not display. I ended up having the define an instance of the SfRichTextBox object in my cs.file and then set the Value property of that object to the value of the populated ExistingProduct model, Description field, before the text would display in the RTE control.

Any ideas?

Attachment: SyncFusion_RTE_Screenshots_9b5d647a.zip

[Pandiyaraj Muniyandi]

Hi David, 

 

Greetings from Syncfusion support. 

 

We have tried to replicate the reported issue with the shared screenshot and the following ways, but we were not able to reproduce the issue at our end. 

• Render the RTE with/without EditForm and binding value to component
• Changing the style reference from CDN, local file and CRG site generated style files.
• Ensured with/without floating toolbar in editor.

 

We have prepared sample for your reference, get it from below link 

https://www.syncfusion.com/downloads/support/forum/153164/ze/RTE-468634632 

 

We suspect sample level styles, override the RichTextEditor component styles in your application. So we suggest you, ensure whether sample level styles overridden in the application from your end. 

 

Still if you face same issue, please modify the above sample to reproduce your issue and revert it to us. This will help us provide a solution at earliest. 

 

Regards, 

Pandiyaraj 

[David Adler]

Pandiyaraj,

Thanks for the reply. I have stepped through my project stylesheets and commenting them one by one and so far it has not had any effect. I was sure to clear my browser cache between each test.

In looking at my project running in Chrome using F12, I can see that there is a hidden RTE that is in what appears as a blank space above the toolbar. I have attached a zip file containing screenshots showing the element styles and in the .e-richtexteditor .e-rte-hidden, if I uncheck the visibility:hidden css, it shows that the blank area is a hidden 2nd editor.  

Any idea why?

Attachment: SyncFusion_RTE_Screenshots_04092020_1e9b5627.zip

[David Adler]

OK, I found the issue. It had nothing to do with css styles. 

I was retrieving the data for the component in the OnParameterSetAsync method and it appears that method was being hit more than once during the component initialization process. 

I moved my code to retrieve the existing record from by backend data store to the OnAfterRenderAsync method, inside an if(firstRender) statement and added the StateHasChanged(); at the end of the successful data retrieval method. This resolve the issue with the RichTextEditor toolbar position and also displayed the retrieved value of the Description property in the RTE as expected.

Thanks for your help.

[Indrajith Srinivasan]

Hi David,

Thanks for the update,

We are glad that the reported issue is resolved. Please let us know if you need any further assistance.

Regards, 

Indrajith