How do you set the height/# rows of editor

2 posts, 0 answers
  1. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 08 Jul 2019 Link to this post

    I am unable to determine how to set the height of the editor.  Additionally, it would be nice if it would autosize, increase height upon entering text.

     

     

  2. Martin
    Admin
    Martin avatar
    149 posts

    Posted 10 Jul 2019 Link to this post

    Hi John,

    Indeed, there is no built-in property which allows us to set the height of the Editor component. However, the dimensions can be changed with a custom CSS styles. I am not sure that I understand correctly which height should be changed - of the text area or the height of the whole Editor wrapper:

    - to change the height of the Editor an inline CSS style can be used:

    <kendo-editor [value]="value" style="height: 300px;">
    </
    kendo-editor>

    - to change the height of the content only, the following CSS can be used:

      .k-editor .k-content {
          height: 200px;
    }

    A common pitfall is to forget to set Angular's ViewEncapsulation to None as otherwise the custom styles will not be applied, unless they are provided at a global level.

    Here is an example that demonstrates the described approach:

    https://stackblitz.com/edit/angular-7nsj5z

    Additionally, the initial height of the Editor can be set by using the min-height CSS property. By design the Editor's <div> tag, which holds the content, increases its height when the entered text reaches the bottom:

    The following example demonstrates an Editor with set height, which auto-resizes according to the entered text:

    https://stackblitz.com/edit/angular-7nsj5z-qrunci

    As a side note, check the Styling section of the Editor component:

    https://www.telerik.com/kendo-angular-ui/components/editor/styling/

    I hope this helps.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Back to Top