New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Extra space is rendered above a paragraph in Chrome
Environment
Product | RadEditor for ASP.NET AJAX |
Description
Chrome renders a big line of space above the opening paragraph by applying a margin-block-start: 1em; to it:
HTML
<div style="border: 1px solid green; width: 500px; height:500px; overflow: scroll;" contenteditable="true">
<p>test</p>
</div>
This might be annoying to your users. You can see how to reduce the gap by overriding the margin rule and import it into the content area of RadEditor in the solution section.
Solution
The solution is to override the default para style by defining a new P CSS selector for the content area of RadEditor:
- Create a CSS file -> EditorContentArea.css with the following content:
CSS
p {
margin-block-start: 0em;
}
and load the EditorContentArea.css file in the content area via the ContentAreaCssFile property:
ASPX
<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaCssFile="~/EditorContentArea.css">
<Content>
<p>test</p>
</Content>
</telerik:RadEditor>