How to apply border styles to tables in the editor?

0 Answers 9 Views
Editor
Murray
Top achievements
Rank 1
Iron
Veteran
Murray asked on 15 May 2024, 10:07 AM

Regardless of whether I set iframe = true or false, or switch my ViewEncapsulation strategy I cannot generate html from the editor which contains borders around table cells.   This means that table content is rendered with just whitespace around it.

Is this a bug?  How can I apply table css and have it appear in the editor's html output?

Georgi
Telerik team
commented on 20 May 2024, 09:13 AM

Hi Murray,

Thank you very much for the details provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular Editor and are experiencing issues when trying to display a table that is also rendered inside the Editor component. Please, let me know if I misinterpreted the requirement.

Generally speaking, it is indeed the expected behavior for a table that is rendered inside the Editor component to be displayed without borders when the developer tries to display outside the component. This means that the developer would need to manually modify the CSS either in the corresponding CSS file of the component or the global stylesheet(styles.css file) in order to render the borders of the table:

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-6tx8et

For further reference, I am also attaching to this response an Angular project that implements the above-mentioned suggestion. To run the app:

  1. Download and unzip the folder.
  2. Execute npm install.
  3. Run ng serve.

In case the appearance of the Editor content should be modified, I would suggest checking out the following article:

https://www.telerik.com/kendo-angular-ui/components/editor/styling/#toc-encapsulated-mode

If none of the provided information helps you achieve the desired modifications, I would ask you to provide more detailed information about the specifics of the implementation as well as some more detailed guidelines about the desired end result. This would allow me to gain a better understanding of the exact scenario and thus come up with a more suitable suggestion.

I hope this helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik

No answers yet. Maybe you can help?

Tags
Editor
Asked by
Murray
Top achievements
Rank 1
Iron
Veteran
Share this question
or