RichTextEditor visual bug in a Dialog

[Dimitrije Prosevski]

<ejs-dialog

isModal="true"

[visible]="false"

style="max-width: 800px;"

>

<ng-template #content>

<ejs-richtexteditor #rte [toolbarSettings]="tools" [showCharCount]="true" maxLength="4000">

ejs-richtexteditor>

My RTE has a visual bug when in a ejs-dialog component. Like in the code above

RTE looks like this (bugged) initially:

After I resize the page, RTE looks like normal:

[Dimitrije Prosevski]

This has solved the issue, but I do not think is the best work-around...I called refreshUI after dialog fired its "open" event

<ejs-dialog

    isModal="true" 

    [visible]="false"

    style="max-width: 800px;"

    (open)="nfDlgOpen()"

  nfDlgOpen(): void {

    this.rte.refreshUI();

  }

[Revanth Krishnan]

Hi Dimitrije, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Rich Text Editor has a visual bug when rendered in an ‘ejs-dialog’ component. I called ‘refreshUI’ after dialog fired its "open" event, which has solved the issue, but I do not think is the best work-around.” 

 

We have analyzed the shared code snippet and this issue occurs because the Rich Text Editor is rendered before the dialog is opened. So the Rich Text Editor height is not properly calculated, so the workaround solution “Calling the ‘refreshUI’ method in the ‘open’ event of the dialog” which you have used to resolve the issue is the proper and the suggested workaround solution. 

 

Please let us know if you have any concerns. 

 

Regards, 

Revanth