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

KendoEditor does not display styles

2 Answers 402 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kamelija
Top achievements
Rank 1
Veteran
Kamelija asked on 22 Apr 2021, 12:24 PM

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 ? :) 

 

2 Answers, 1 is accepted

Sort by
0
Kamelija
Top achievements
Rank 1
Veteran
answered on 23 Apr 2021, 09:21 AM
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}
0
Krissy
Telerik team
answered on 23 Apr 2021, 10:26 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
General Discussions
Asked by
Kamelija
Top achievements
Rank 1
Veteran
Answers by
Kamelija
Top achievements
Rank 1
Veteran
Krissy
Telerik team
Share this question
or