Remove Extra Whitespace on Enter

Environment

Product

Progress® Telerik® UI Editor for ASP.NET MVC

Problem

When the Editor is opened in the browser I press the Enter key, an extra blank row appears before the next sentence. To remove the extra blank row, I have to press Shift+Enter to get a new row right after the previous row.

How can I change the default behavior and prevent the appearance of the extra blank row on Enter?

Solution

On Enter, the Editor inserts a paragraph and paragraphs have a default margin set by the browsers. Therefore, to remove the extra row, add a stylesheet to the content area of the Editor.

You can also set a similar paragraph rule to the whole content to provide a what-you-see-is-what-you-get styling.

@(Html.Kendo().Editor()
                .Name("messageEditor")
                .StyleSheets(s => s.Add(@Url.Content("~/Content/removeParaMargin.css")))
)

p {
    margin: 0;
}