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

15 posts, 1 answers
  1. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 11 Mar 2015 Link to this post

    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
  2. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 11 Mar 2015 in reply to Mark Kucera Link to this post

    Sorry, i forgot to link the youtube video:   https://www.youtube.com/watch?v=eQX6usEWlpE
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Mar 2015 Link to this post

    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.

     
  5. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 13 Mar 2015 in reply to Ianko Link to this post

    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.

  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 16 Mar 2015 Link to this post

    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.

     
  7. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 16 Mar 2015 in reply to Ianko Link to this post

    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
  8. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 18 Mar 2015 in reply to Ianko Link to this post

    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
  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 19 Mar 2015 Link to this post

    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.

     
  10. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 19 Mar 2015 in reply to Ianko Link to this post

    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

  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Mar 2015 Link to this post

    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.

     
  12. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 24 Mar 2015 in reply to Ianko Link to this post

    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
  13. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 26 Mar 2015 Link to this post

    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.

     
  14. Lenny_shp
    Lenny_shp avatar
    343 posts
    Member since:
    Jul 2006

    Posted 21 Jul 2015 in reply to Ianko Link to this post

    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

     ​

  15. Lenny_shp
    Lenny_shp avatar
    343 posts
    Member since:
    Jul 2006

    Posted 21 Jul 2015 in reply to Lenny_shp Link to this post

    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.​

  16. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 21 Jul 2015 in reply to Lenny_shp Link to this post

    @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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017