Kendo Editor Cannot Display Table Border in Html Page

2 posts, 0 answers
  1. rain
    rain avatar
    3 posts
    Member since:
    Apr 2020

    Posted 22 May Link to this post

    why kendo editor cannot display border table when displaying content ?
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 26 May Link to this post

    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

    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.
Back to Top