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 305 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Mark Kucera
Top achievements
Rank 1
Mark Kucera asked on 11 Mar 2015, 02:11 PM
We're experiencing a weird issue in 2015.1.225.40 when we work in the editor in HTML view.  the content is double spaced and the cursor is about twice the size that i was in previous versions.  I can confirm that this issue was not present in 2014.3.1209.40.   Any HTML code that we paste into the HTML view automatically double spaces. I tried setting ContentFilters="none" to see if that fixed the problem and it didn't change anything.  I've recorded this in a video for you to view to see exactly what we are experiencing.

https://www.youtube.com/watch?v=eQX6usEWlpE

Thanks!

-Mark

14 Answers, 1 is accepted

Sort by
0
Mark Kucera
Top achievements
Rank 1
answered on 11 Mar 2015, 02:36 PM
Sorry, i forgot to link the youtube video:   https://www.youtube.com/watch?v=eQX6usEWlpE
0
Ianko
Telerik team
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.

 
0
Mark Kucera
Top achievements
Rank 1
answered on 14 Mar 2015, 01:52 AM
EditorBody.css just looks like this:

body
{
background-color: white;
color: black;
}

it just ensures the editor text is black and the background color for the editor is white...

i have confirmed that i can create or fix this issue simply by changing the version of the telerik dll.  my code is the same.  with the old dll it works, with the new one there is a problem.

0
Ianko
Telerik team
answered on 16 Mar 2015, 11:05 AM
Hello Mark,

It would be best to provide a locally runnable, sample solution with which to reproduce and investigate this on my end.

Currently, I am unable to recreate the same scenario.

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.

 
0
Mark Kucera
Top achievements
Rank 1
answered on 16 Mar 2015, 05:04 PM
Ok, i have a two sample projects that do recreate this issue.  Where do you want me to send/post them as i don't have trial versions of the telerik.dll?  I only have the full licensed versions.  I could post the sample projects w/o the telerik dll but then it's not fully working.  LMK how to proceed.

-Mark
0
Mark Kucera
Top achievements
Rank 1
answered on 18 Mar 2015, 06:33 PM
Ok, i have a two sample projects that do recreate this issue.  Where do you want me to send/post them as i don't have trial versions of the telerik.dll?  I only have the full licensed versions.  I could post the sample projects w/o the telerik dll but then it's not fully working.  LMK how to proceed.

-Mark
0
Ianko
Telerik team
answered on 19 Mar 2015, 08:15 AM
Hello Mark,

You can just remove the Telerik assemblies, specify them in a list with their version. Locally, I will add the same assemblies and it should be runnable. 

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.

 
0
Mark Kucera
Top achievements
Rank 1
answered on 19 Mar 2015, 04:00 PM
Thanks, here is a link to the sample project files since the forum doesn't allow us to attach .zip files. 

http://images.publicaster.com/imagelibrary/account116/documents/EditorBugDemoProjects.zip

and here is a video that i recorded that goes over the project and demonstrates the issue were are experiencing.

https://youtu.be/8yV8pByOjPE

-Mark

0
Ianko
Telerik team
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.

 
0
Mark Kucera
Top achievements
Rank 1
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
0
Accepted
Ianko
Telerik team
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.

 
0
Lenny_shp
Top achievements
Rank 2
answered on 21 Jul 2015, 06:08 PM

Having same double spacing problem with 2015.2.714.45

and problem exists in this demo.   Your CSS doesn't fix the issue.

http://demos.telerik.com/aspnet-ajax/editor/examples/editortoolbars/defaultvb.aspx?show-source=true

 ​

0
Lenny_shp
Top achievements
Rank 2
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.​

0
Mark Kucera
Top achievements
Rank 1
answered on 21 Jul 2015, 09:49 PM

@Lenny_shp, i wanted to drop you a quick note to let you know that the solution that was proposed here did fix my problem.  a few major versions ago Telerik switched the editor from an iframe implementation to a textbox implementation, which caused the editor window to start inheriting some global css used by our site. 

 

-Mark

Tags
Editor
Asked by
Mark Kucera
Top achievements
Rank 1
Answers by
Mark Kucera
Top achievements
Rank 1
Ianko
Telerik team
Lenny_shp
Top achievements
Rank 2
Share this question
or