This is a migrated thread and some comments may be shown as answers.

Editor Double spacing in HTML view + weird cursor issue in v 2015.1.225.40

14 Answers 389 Views

Editor

This is a migrated thread and some comments may be shown as answers.

14 Answers, 1 is accepted

answered on 13 Mar 2015, 08:07 AM

Hello Mark,

The same behavior is not reproducible with this online demo.

In your screencast I see that there is a custom CSS files used for the content area--EditorBody.css file. Can you try removing it and see if there are any differences in the behavior? Also, could you examine the HTML content after pasting the HTML markup, it might the markup that causes the line-height to a larger value.

On a side note, when pasting HTML content or any other code content, it is recommended to use the Format Code Block dialog.

Regards,
Ianko
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 24 Mar 2015, 06:54 AM

Hi Mark,

Thank you for providing the materials.

The issues stems from an external CSS file--flat-ui.css. There is a global CSS style for all textarea elements on the page. And it modifies the line-height, and thus, causing the lines to appear larger than expected. You can also examine this screencast.

The reason for the different behavior in this exact version, is because of an improvement in the server HTML rendering of the control. Previously, the same textarea was rendered inside an iframe. Now, this iframe is removed, and thus, global CSS styles affect it.

Regards,
Ianko
Telerik

See What's Next in App Development. Register for TelerikNEXT.

answered on 24 Mar 2015, 01:03 PM

Thank you, this is very helpful! My followup question now is how can I style that textbox short of
a) removing my global style
b) redefining the padding and line height with a global <style>...</style> right above the editor declaration?

I tried adding a style="" attribute to the editor tag and that didn't pass through to the textarea field. Moreover there doesn't seem to be a name, id, or class associated with that textarea that would allow me to write css to target that field specifically. There is the <cssfiles> attribute for the editor, but this is only passed into the WYSIWYG view. Likewise the tablelayoutcssfile and contentareacssfile attributes are only added into the WYSIWYG view.

My current workaround is to do something like this:

<style>

textarea {

line-height: inherit;

padding: inherit;

}

</style>

<telerik:RadEditor ID="EMailContentEditor" runat="server" Width="95%" ContentFilters="RemoveScripts,IndentHTMLContent" NewLineMode="Br"

ConvertToXhtml="false" ConvertFontToSpan="false" ExternalDialogsPath="/EditorDialogs"

EditModes="Design,Html" Height="600px" OnClientCommandExecuting="OnClientCommandExecuting"

OnClientLoad="OnClientLoad">

<CssFiles>

<telerik:EditorCssFile Value="/EditorBody.css?4" />

</CssFiles>...

This not only requires a change to every page where i use an editor, but it also requires that a developer remember to add this extra css, and remember what it's there for, since it's not actually contained anywhere in the definition. It also redefines the textarea for anything else futher down on the page. Fortunately i don't use a lot of textarea fields, but you can see how this is not an idea workaround.

Any assistance you can provide to make this easier is much appreciated.

Thanks!
-Mark

Accepted

answered on 26 Mar 2015, 07:43 AM

Hello Mark,

Inline styles would not work, because they are applied to the RadEditor wrapper element and not to the textarea. Also, CssFiles will not work, because they are intended to affect the content area, which is iframe, and not the textarea. All these matters are general as per to the RadEditor rendering mechanism and you can find out more about that by just investigating with the browser's HTML inspector.

As for how to style all textareas of RadEditor, you can use a selector that specifies that:

.RadEditor textarea{

line-height:normal;

padding:0;

}

Note, resetting values are used and not inherit ones. I do not recommend inheriting values from parent element. You can never be sure how they are decorated.

Regards,
Ianko
Telerik

See What's Next in App Development. Register for TelerikNEXT.

answered on 21 Jul 2015, 06:20 PM

Found http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/control-new-line-behavior

Telerik RadEditor's NewLineMode property specifies whether the editor should insert a new line (<br /> tag), a new paragraph (<p> tag) or a div (<div> tag) when the Enter key is pressed. The default value is "P" (<p > tag) in order to closely reflect the behavior of desktop word-processors. Here, pressing Shift+Enter will insert a <br /> tag.

If you set the NewLineMode property to Br, a <br /> tag will be entered on every carriage return (pressing Enter). In this case you can insert paragraph tags by pressing Ctrl+M or the New Paragraph button.