RichTextEditor in readonly mode now has grey border

[Wayne Fisher]

Somewhere between @syncfusion/ej2-react-richtexteditor 18.4.35 and 18.4.39

grey borders now get added to the RichTextEditor when readonly is set.

Is this intentional? What is the css required to turn this off?

thanks

Nick

[Revanth Krishnan]

Hi Wayne, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Rich Text Editor in `readonly` mode now has grey border”. 

 

We have tried to reproduce the issue with the following, 

• By enabling the ‘readonly’ mode initially.
• By enabling the ‘readonly’ mode dynamically.
• Also, we have enabled and disabled the toolbar in the Rich Text Editor.
• By enabling the resize of the Rich Text Editor.
• Also, we have checked the use case in all the browsers.

 

But we couldn’t able to reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/react-ipciv5-wcaduj?file=index.js 

 

Could you please share us with more details below, 

• Code snippet of the Rich Text Editor.
• Screenshot of the issue reported scenario.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

 

[Wayne Fisher]

Hi,

Here's a code sand box with the issue - https://codesandbox.io/s/syncfusion-rte-readonly-border-7dk22?file=/src/styles.css

Using version 18.4.35 the css successfully suppresses the grey border -

.e-richtexteditor .e-rte-content,

.e-richtexteditor .e-source-content {

border: unset;

background: unset;

z-index: 0;

}

However, changing the version to 18.4.39 this no longer works.

[Wayne Fisher]

I believe this is occurring because of this addition to material.css -

.e-richtexteditor:not(.e-rte-tb-expand) {

border: 1px solid rgba(0, 0, 0, 0.12);

}

.e-richtexteditor:not(.e-rte-tb-expand) .e-rte-content {

border: 0;

border-bottom: 0;

border-top: 0;

}

[Wayne Fisher]

I have fixed the issue by adding the following to the global css -

.e-richtexteditor:not(.e-rte-tb-expand) {

border: none;

}

[Revanth Krishnan]

Hi Wayne, 

 

 

Good day to you. 

 

 

We have further validated your query with the shared sample and were able to reproduce the issue from our end, and this issue can be resolved by adding the style border as none to the class “.e-richtexteditor:not(.e-rte-tb-expand)”. We are glad that you found the solution to this issue. 

 

Please let us know if you need any other further assistance. 

 

Regards, 

Revanth