How to allow the user to resize the RTE control

I have created a simple RTE control, the code is below:

<SfRichTextEditor @ref="RteObj" Value="@GameStatsText" Height="80%" Width="100%" EnableResize="true">
<RichTextEditorToolbarSettings Items="Tools"></RichTextEditorToolbarSettings>
</SfRichTextEditor>

I have set the EnableResize option to true, but I do not get the drag control appear at the bottom of the RTE control where the user could resize it.

What am I doing wrong?

I did spot in one thread that the footer needed to be shown before the resize corner dragger would appear, but there is no ShowFooter or EnableFooter options.

Thanks.

4 Replies 1 reply marked as answer

RK Revanth Krishnan Syncfusion Team March 26, 2021 07:25 AM UTC

Hi Mark, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “How to allow the user to resize the Rich Text Editor, I have set the ‘EnableResize’ option to true, but I do not get the drag control to appear at the bottom of the RTE control. I did spot in one thread that the footer needed to be shown before the resize corner dragger would appear”. 
 
There is no property for the footer in the Rich Text Editor. The property ‘EnableResize’ set to true will enable and allow the resize in the Rich Text Editor. We suspect that the issue occurred due to the height given as ‘80%’ with parent element height set as auto. So setting the fixed height for the Rich Text Editor in pixels or setting the wrapper element for the Rich Text Editor with fixed height will resolve this issue. We have prepared a sample for your reference, 
 
Code Snippet: 
 
<div style="height: 500px"> 
    <SfRichTextEditor @ref="RteObj" Value="@GameStatsText" Height="80%" Width="100%" EnableResize="true"> 
        <RichTextEditorToolbarSettings Items="Tools"></RichTextEditorToolbarSettings> 
    </SfRichTextEditor> 
</div> 
Or  
 
<SfRichTextEditor @ref="RteObj" Value="@GameStatsText" Height="500px" Width="100%" EnableResize="true"> 
    <RichTextEditorToolbarSettings Items="Tools"></RichTextEditorToolbarSettings> 
</SfRichTextEditor> 
 
 
Please check the above code snippet and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 



MA Mark March 26, 2021 09:28 AM UTC

Sorted, MANY thanks.

I also noted that I had an empty toolbar definition, which is by design as I only want to show HTML, and not allow users to edit it.  With the toolbar definition empty, it did not show the bottom of the editor and therefore did not have the resize control in the corner.  As soon as I added at least one button to the toolbar, everything showed up correctly.

So, for me, I am happy with this solution.  If however, there is a way to have no top toolbar, but still have the bottom of the editor show and the resize control visible, then even better.  It looks like the control calculates assuming there will be a toolbar, which may not ALWAYS be the case.

Thanks

Mark


RK Revanth Krishnan Syncfusion Team March 29, 2021 11:25 AM UTC

Hi Mark, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query and have considered “Rich Text Editor is not rendered properly when enabling the resize and disabling the toolbar” as a bug from our end and logged the report for the same and the fix will be included in our patch release on 7th April. 
 
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/23748 
 
Regards, 
Revanth  



RK Revanth Krishnan Syncfusion Team April 9, 2021 01:58 PM UTC

Hi Mark,  
  
  
Thanks for the patience.  
  
We have resolved the reported issue “Rich Text Editor is not rendered when enabling the resize and disabling the toolbar” with the package version 19.1.55.     
Can you please upgrade your package to this version to resolve the issue on your end?     
     
   
Regards,   
Revanth  


Marked as answer
Loader.
Up arrow icon