Kendo Editor Cannot Display Table Border in Html Page

[rain]

why kendo editor cannot display border table when displaying content ?

[Dimiter Topalov]

Hi Rain,

Currently there is a styling issue on our end that prevents the Editor tables from being displayed properly when the Editor is not in iframe mode. The following custom CSS can be used as a workaround until we provide a fix in our themes:

https://stackblitz.com/edit/angular-svn5tg?file=app/app.component.ts

`
      .ProseMirror .tableWrapper {
    overflow-x: auto;
    margin: 1em 0;
  }
  .ProseMirror table {
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
  }
  .ProseMirror td, .ProseMirror th {
    min-width: 1em;
    border: 1px solid #ddd;
    padding: 3px 5px;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
  }
  .ProseMirror th {
    font-weight: bold;
    text-align: left;
  }
  .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 20;
    background-color: #adf;
    pointer-events: none;
  }
  /* Give selected cells a blue overlay */
  .ProseMirror .selectedCell:after {
    z-index: 2;
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(200, 200, 255, 0.4);
    pointer-events: none;
  }
    `

I hope this helps, and I apologize for the caused inconvenience.

Regards,
Dimiter Topalov
Progress Telerik

[Mark]

Hi,

I'm having the same issue as th OP.

I tried the suggested fix but this does not work.

Has there been a fix released for this since the OP's post?

[Dimiter Topalov]

Hi Mark,

A built-in fix is not yet available, but the suggested fix should be working as expected. Here is an example using the latest versions of our packages:

https://stackblitz.com/edit/angular-auegmj?file=app/app.component.ts

Make sure to either set the host component's ViewEncapsulation to None, or to provide the custom styling at a global level so that the internal Editor styling can be overwritten.

Alternatively, if the Editor is used in the default iframe mode, the same styling is applied out-of-the-box.

The original issue, logged in our public themes repository can be tracked here:

https://github.com/telerik/kendo-themes/issues/856

Regards,
Dimiter Topalov
Progress Telerik

[Mark]

Hi Dimiter,

Thanks for the reply.

I downloaded the latest Kendo UI components and tried both your suggested fixes, but when using the editor source button to examine the HTML it displays a table with a css class but if this HTML output is used for an email, this class obviously does not render a table with a border on the clients machine?

Thanks,

Mark.

 

[Dimiter Topalov]

Hello Mark,

I was left with the impression that the table borders are not visible within the Kendo Editor, as this the initial post was about. This issue is related to styling which is missing in non-iframe mode, and should be added manually.

The missing styling when the HTML output is taken out of the Editor value, and used somewhere else is expected, as we are not adding any specific inline styles to the generated HTML when creating the table that could be applicable outside of the Editor.

The outcome of using the generated table markup outside of the Editor would be the same as if using it as a standard HTML:

https://stackblitz.com/edit/angular-auegmj-zzkn3o?file=app%2Fapp.component.ts

If there are no specific styles targeting the table elements in the context they are used in, the table will look like a regular HTML table with no styling whatsoever.

The k-table class is generated internally, but does not affect the styling.

To sum up - if the generated HTML needs additional styling to be applied outside of the Editor, this should be performed like with any other piece of HTML - either inline styling, or one coming from outside styling sheet/tag should be applied.

Regards,
Dimiter Topalov
Progress Telerik