We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

First row not visible in Rich Text editor

Thread ID:

Created:

Updated:

Platform:

Replies:

146752 Aug 17,2019 06:56 PM UTC Dec 10,2020 12:34 PM UTC Blazor 7
loading
Tags: Rich Text Editor
Tsvetan
Asked On August 17, 2019 06:56 PM UTC

Hello,

We are using the Rich Text editor like this:               

 <EjsRichTextEditor @bind-Value=@this.Characteristics >                     
 </EjsRichTextEditor>

But the first row is not visible, only when you click enter you see the cursor. Even if there is a text it's not visible on this first row.

This rich text editor is inside of EjsDialog


Kind Regards,
Tsvetan

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 19, 2019 09:50 AM UTC

Hi Tsvetan, 
 
Greetings from Syncfusion support. 
 
We have validated the reported issue and able to reproduce from our end while render the Rich Text Editor inside the Dialog component. The dialog container and its wrapper elements are styled with display as none, so the editor’s toolbar does not get proper offset width and rendered above the edit area container and hide the first row of content. 
 
So, we suggest you to call the RichTextEditor RefreshUI method on Dialog Opened Event callback as mentioned below syntax 
 
RefreshUI API: Used to refresh RichTextEditor views like toolbar and char count. 
 
 
<EjsDialog @ref="DialogObj" Width="450px" ShowCloseIcon="true"> 
    <DialogEvents Opened="@DialogOpen"></DialogEvents> 
    <DialogTemplates> 
        <Header> 
            <div>Dialog Header</div> 
        </Header> 
        <Content> 
            <EjsRichTextEditor @ref="RteObj" @bind-Value=@this.Characteristics> 
            </EjsRichTextEditor> 
        </Content> 
    </DialogTemplates> 
</EjsDialog> 
 
 
@code { 
    EjsDialog DialogObj; 
    EjsRichTextEditor RteObj; 
 
    private string Characteristics; 
 
    private void DialogOpen() 
    { 
        this.RteObj.RefreshUI(); 
    } 
} 
 
 
We have prepared sample for your reference, get it from below link  
 
Regards, 
Pandiyaraj M 


Tsvetan
Replied On August 20, 2019 06:38 PM UTC

Hello Pandiyaraj,

Thank you for the information. It works now.

Kind Regards,
Tsvetan

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 20, 2019 07:00 PM UTC

Hi Tsvetan, 
  
Most welcome! 
  
Regards, 
Pandiyaraj M 


Joseph Tan
Replied On August 26, 2020 04:44 AM UTC

I had the same problem with Blazor release 18.2.48 and this fixed it.

This really should be in the documentation (I couldn't find it)


Indrajith Srinivasan [Syncfusion]
Replied On August 27, 2020 06:46 AM UTC

Hi Joseph, 
 
Good day to you, 
 
We have already considered internally the addition of this in Rich Text Editor documentation and it will be included on or before our Volume 3 Main release. 
 
Regards, 
Indrajith 


Indrajith Srinivasan [Syncfusion]
Replied On October 6, 2020 12:21 PM UTC

Hi Joseph,

We couldn't include the documentation changes with our Volume 3 main release. We will include the documentation from our end, on or before Volume 3 SP 1 release.

Regards,
Indrajith 


Indrajith Srinivasan [Syncfusion]
Replied On December 10, 2020 12:34 PM UTC

Hi Joseph,


We couldn't include the document changes with our volume 3 Sp1 release. We will include the documentation from our end on or before our Volume 4 SP 1 release.

Regards,
Indrajith

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon