KendoEditor does not display styles

[Kamelija]

I am using the KendoEditor and when I add table the table doesn't have borders or any style. When I test on your page the table is having (inspect element) this class and style

ProseMirror td, .ProseMirror th {
min-width: 1em;
border: 1px solid #ddd;
padding: 3px 5px;
vertical-align: top;
box-sizing: border-box;
position: relative;

}

But in my case this is missing, there is not a class for td for ProseMirror, and the only style that I get is this

.k-editor-content > .ProseMirror table {
white-space: pre-wrap;
}

 

Any idea what might be causing this problem ? :) 

 

[Kamelija]

I fixed this issue with removing defaultEditMode="div" :) .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}

[Krissy]

Hi Kamelija,

This happens because by default the styles are not loaded when the defaultEditMode is set to "div".

Please take a look at the demo on this page of our documentation: 
https://www.telerik.com/kendo-react-ui-develop/components/editor/rendering-mode/ 

The demo contains the styles (styles.css) that need to be added in your project as well, in order for the table to have the appropriate styles.

Hope this is helpful.

Regards,
Krissy
Progress Telerik