After hitting enter the first line moves down in Chrome

RELATED TO:

AUTHOR: Rumen Zhekov

DATE POSTED: August 10, 2018

PROBLEM

After the end user hits the enter key, the first line is shifted down in the content area in Chrome

DESCRIPTION

When the user starts editing the contents, the first line is on the top. But after he hits the enter key, the line will be moved down and shows a lot of top margin.

Extra Margin On Top

The observed behavior happens in Chrome, when the editor is configured to insert paragraphs on enter key (NewLineMode="P"). 

The browser injects the following Chrome specific styles for P elements, which shifts the paragraph tag because of the applied -webkit-margin-before style:

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

SOLUTION

The solution is to override the -webkit-margin-before style by importing your own Content.css file via the CssFiles property in the content area:

Default.aspx
<telerik:RadEditor runat="server" NewLineMode="P" ID="RadEditor1">
    <CssFiles>
        <telerik:EditorCssFile Value="~/Content.css" />
    </CssFiles>
    <Content>some content</Content>
</telerik:RadEditor>

The contents of the Content.css should be:
p {
    -webkit-margin-before: 0 !important;
}

Pro Tips

You can find more ways to customize the content area appearance in the following online resources:

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.