Google Chrome

[DogBizPro]

We have an issue with the editor in Google Chrome. When the editor gets loaded the cursor does not look like it is in the editor box. If you click in the box then the cursor is there and you can start typing but you get a blank line at the top that you cannot remove. Our clients are complaining about this :)

It does not do this in Firefox. If you do the above and then switch to html view you see "<p>text</p>". If you do the same in FireFox you see nothing in html view. Ironically if you switch to html mode in Google first and then switch back that does not happen. 

How can we fix this so our clients are not unhappy?

[Ianko]

Hello Stephanie,

I am not sure if I understand the encountered problem. It would be helpful if you could provide more details about the configuration used. Maybe a simple project that demonstrates the issue, so that I could easily reproduce it on my end and investigate it further.

On a side note, if the editor is initially hidden and shown dynamically upon client-side logic, then this could be a well known behavior that can be fixed using the repaint() method. Please examine this help article for more information on this matter.

Regards,
Ianko
Telerik

 

 

[Sean]

I have this same problem. I've created a sample project that duplicates the issue here <https://docs.google.com/uc?export=download&id=0B28esAM-SVW5OVRFZm1oQUlPS00>


Notice that the editor in Chrome also only shows the blinking cursor if you click on the very top line of the editor. Clicking any lower spot allows you to type in the editor but does not display the blinking cursor.

[DogBizPro]

Sorry, somehow I didn't get notified of the Telerik reply...

It looks like Sean is having the same issue. This is only an issue in Chrome for us. Everything works perfectly in the other browsers.

[Ianko]

Hi all,

The described issue is encountered due to a browser behavior of the Chrome browser. The content area of the radEditor is an iframe with a body element inside, which is set with 20px height. What happens is that the first line, in which the cursor is blinking is the body, but the rest of it is the iframe. In most browser the click event raises the body's event, but in Chrome this has not been as expected and the iframe click only focuses the body.

A possible and simple resolution is to extend the body's height so that fills the iframe and the user actually clicks at the body and not at the iframe.

Example:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <CssFiles>
        <telerik:EditorCssFile Value="Styles/StyleSheet.css" />
    </CssFiles>
</telerik:RadEditor>

StyleSheet.css

body {
    height: 217px;
}

Regards,
Ianko
Telerik

 

 

[Sean]

That solves the cursor issue but it doesn't address the p tag issue.

You can see the p tag issue in the attached screenshot.

[Ianko]

Hi,

The P tag is getting inserted only if the NewLineMode is set to P and such behavior would be expected on user typing.

In Firefox the P element will wrap the text after hitting Enter.

Regards,
Ianko
Telerik

 

 

[Sean]

In the example project, NewLineMode is set to div. The p tag only gets inserted for the first line while using chrome.

[Ianko]

Hi Sean,

The described behavior is logged and you can follow this feedback portal item for further updates on the task's update and for possible workarounds.

Regards,
Ianko
Telerik

 

 

[DogBizPro]

I just changed the new line constant to br and that seems to work fine.