Problem of being overridden by another css

[Mustafa Özçakr]

On my screen where I use primeng, the syncfusion richtexteditor toolbar is overridden by the primeng css and my design is broken, how can I prevent this?

image:

1) https://ibb.co/n0gZCKT

2) https://ibb.co/LNrJ4gD

Attachment: syncfusion_primeng_fecfb2cf.zip

[Mustafa Özçakr]

hi,

Is there anyone who can help with the problem I shared?

[Gokulraj Devarajan]

We suspect that the issue occurred when the initial rendering of the Rich Text Editor component is done the sidebar component will have the style of display none so the editor's toolbar did not get proper offset and render outside.

To solve the issue we recommend calling the refreshUI method of the Rich Text Editor component after the sidebar is opened. 

API Reference: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#refreshui

if you still face the issue kindly update this sample with the issue replicating code to further validate from our end.

[Mustafa Özçakr]

I don't think the problem is caused by the sidebar component. Because in the picture I posted, I put a Rich Text Editor outside the p-TabView and it works without any problems. My opinion is influenced by p- TabView  css. Relevant pictures are attached. Additionally, I am adding the code I wrote.

https://ibb.co/kGKKPHj

https://ibb.co/0Cz3rC0

https://ibb.co/9V8kkKF

https://ibb.co/4TZr5v4

[Vinitha Jeyakumar]

Hi Mustafa Özçakr,

If you are facing issue while using the RichTextEditor inside the tabView control. Then, you need to call the refreshUI function of the RichTextEditor in the opening or created event of the tabView control(once after the Editor is rendered into the tabView) to resolve the reported issue at your end.

Regards,

Vinitha

[Mustafa Özçakr]

Is there an example usage of Refresh UI?

[Vinitha Jeyakumar]

Hi Mustafa Özçakr,

We have created a sample using RichTextEditor inside the tab control for your reference. here, we have called the refreshUI function in the created event of the Editor. Please check the code and sample below,

Code snippet:

<ejs-tab #tab_default id="tab_default" heightAdjustMode="Auto">

    <e-tabitems>

      <e-tabitem [header]="headerText[0]">

        <ng-template #content>

          <ejs-richtexteditor #rteObj (created)="onCreate()">

            <ng-template #valueTemplate>

              <p>Inside the 0th RTE</p>

            </ng-template>

          </ejs-richtexteditor>

        </ng-template>

      </e-tabitem>

      <e-tabitem [header]="headerText[1]"> </e-tabitem>

      <e-tabitem [header]="headerText[2]"> </e-tabitem>

    </e-tabitems>

  </ejs-tab>

 public onCreate() {

    (this.rteObj as any).refreshUI();

  }

Sample: https://stackblitz.com/edit/angular-cdgrhe-zsbmht?file=package.json,src%2Fapp.component.html

Regards,

Vinitha