How to maximize Height of RichTextEditor related Web browser's height.

[Charles]

I'm using SfRichTextEditor control as below, 

I wan to make RichTextEditor's height will be related Browser height. but Height="100%" property is not working.

            <div>

                <div class="row header">

                    <div class="col-12">

                        <SfTextBox Placeholder="Subject"

                                    FloatLabelType="@FloatLabelType.Auto"

                                    @bind-Value="@addEditNoteModel.Subject">

                        </SfTextBox>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12">

                        <SfRichTextEditor  EditorMode="EditorMode.HTML"

                                            Width="100%"

                                            Height="100%"

                                            AutoSaveOnIdle="true"

                                            EnablePersistence="true"

                                            @[email protected]>

                            <RichTextEditorToolbarSettings Type="ToolbarType.Expand" Items="@toolbarItems" />

                        </SfRichTextEditor>

                    </div>

                </div>

[Vinitha Jeyakumar]

Hi Charles, 

 

 

Greetings from Syncfusion software 

 

 

We have validated your query “How to maximize Height of RichTextEditor related Web browser's height” 

 

Your requirement can be achieved by setting the height of the Rich Text Editor to “100vh” and also set the height of the body, Html to 100%. Please check the code below, 

 

Code snippet: 

<SfRichTextEditor Height="100vh" Width="100%"> 

. . . 

 . . . 

</SfRichTextEditor> 

 

<style> 

    body, html { 

        height: 100%; 

    } 

</style> 

 

Please try the above suggested solution and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha