This is a migrated thread and some comments may be shown as answers.

Kendo Editor style block preventing borders and padding from displaying in table cells

4 Answers 360 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Bob asked on 05 May 2020, 08:15 PM

Our software uses both Telerik WPF editors and Kendo editors, and we transfer the HTML back and forth from these editors.  The WPF editors export the HTML, and that HTML is loaded into the Kendo editor.  One of the problems we encountered is that table cell (td) padding and borders are not showing up in the Kendo editor when loaded.  The reason is that there appears to be a block of styles that always appears in the editor doc head, and these styles are overriding the class styles of the tables.

Here is the block of styles that gets inserted into the editor head (appears to come from the javascript:

<html lang="en"><head><meta charset="utf-8"><title>Kendo UI Editor content</title><style>html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table th{outline:0;border: 1px dotted #999;}.k-table p{margin:0;padding:0;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}</style>

 

Here is an example of a TD that is part of our HTML being loaded:

<td class="tc_8D184ABE" align="left" valign="top" data-role="resizable"><p class="Normal p_A43897F6"><span>Some text</span></p></td>

 

And the class styles:

.tc_8D184ABE { telerik-style-type: local;border-left: 12px double #548ED5;border-top: 12px double #548ED5;border-right: 12px double #548ED5;border-bottom: 12px double #548ED5;padding: 4px 12px 4px 12px;width: 189.466674804688px;vertical-align: top; }

 

Since the .k-table td style in the head block overrides the class styles, the borders and the padding do not render.  Is there any suggestions for getting around this issue?

Thanks for any help.

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 06 May 2020, 03:54 AM

Please note that we found one workaround by using the PreMailer.Net product to move the styles inline.

private string TranslateHtml(string editorHtml)
{
    return PreMailer.Net.PreMailer.MoveCssInline(editorHtml, stripIdAndClassAttributes: true, removeStyleElements: true).Html;
}
0
Accepted
Petar
Telerik team
answered on 07 May 2020, 07:09 PM

Hi Bob,

It is nice to hear that you've managed to find a workaround for the issue. Another approach that you can try is to apply code similar to:

var editorBody = $("#editor").data("kendoEditor").body;
var head = $(editorBody).parent().find("head");
head.find("style").text("html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}");

The above will remove the styles that are applied to the table DOM element in the Editor component. The long text above is the same as the one that loads by default but without the classes that syle the tables inside the Editor.

This approach isn't something I would usually recommend as it can break the Editor's functionality but is a possible approach that can work in your scenario with pre-defined styles. Attached to my reply you will find a project that demonstrates the usage of the above code. To load the styles of the tc_8D184ABE class, the attached example uses the stylesheets configuration of the Editor. 

I hope the suggested approach can be an alternative to the workaround you've already implemented.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 08 May 2020, 05:54 PM
Petar, thank you for this other workaround.  Since we do not want to inadvertently alter the behavior of the editor itself, we can use the in-lining of styles for now.  That seems to work just fine.
0
Petar
Telerik team
answered on 12 May 2020, 10:27 AM

Hi Bob,

If the in-lining of the styles works correctly in your business logic, I will also recommend keeping to this approach. The idea of the previous example was to demonstrate another possible solution for your use-case scenario but for sure I will be better if we don't change the default Editor behavior. 

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Editor
Asked by
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Petar
Telerik team
Share this question
or