Hi there,
I recently upgraded my RadControls to (Q1 2011 I believe?) I noticed a problem with the RadEditor while working in Chrome where all my class names got changed to lower-case and thus when I tried to apply a style the style wouldn't work. I first noticed this error when I try to apply a class to a order list item and it worked fine in IE but not in Chrome. The class names I'm using in my CSS have mix-casing (e.g. lowerAlpha) and in Chrome the RadEditor was inserting (loweralpha). Please help.
Thanks
I recently upgraded my RadControls to (Q1 2011 I believe?) I noticed a problem with the RadEditor while working in Chrome where all my class names got changed to lower-case and thus when I tried to apply a style the style wouldn't work. I first noticed this error when I try to apply a class to a order list item and it worked fine in IE but not in Chrome. The class names I'm using in my CSS have mix-casing (e.g. lowerAlpha) and in Chrome the RadEditor was inserting (loweralpha). Please help.
Thanks
5 Answers, 1 is accepted
0
Hello Brian,
This appears to be a browser behavior. When populating the ApplyClass dropdown and setting the classname to the element we do not modify the selectors. The values that appear in the dropdown is returned by cssRules property of the document.styleSheets object.
It appears that when the document element is an <iframe> document all the CSS Rules are modified to lowercase by Google Chrome engine. You can verify this using a standard editable <iframe>. For your convenience I have attached a simple HTML page demonstrating this problem.
A possible solution to this issue is to configure RadEditor to use editable <div> for its content area by setting its ContentAreaMode property to Div, e.g.:
We have reported this issue to the developers of Google Chrome. Here is the link to the issue:
http://code.google.com/p/chromium/issues/detail?id=67782
Best regards,
Rumen
the Telerik team
This appears to be a browser behavior. When populating the ApplyClass dropdown and setting the classname to the element we do not modify the selectors. The values that appear in the dropdown is returned by cssRules property of the document.styleSheets object.
It appears that when the document element is an <iframe> document all the CSS Rules are modified to lowercase by Google Chrome engine. You can verify this using a standard editable <iframe>. For your convenience I have attached a simple HTML page demonstrating this problem.
A possible solution to this issue is to configure RadEditor to use editable <div> for its content area by setting its ContentAreaMode property to Div, e.g.:
<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="Div"></telerik:RadEditor>We have reported this issue to the developers of Google Chrome. Here is the link to the issue:
http://code.google.com/p/chromium/issues/detail?id=67782
Best regards,
Rumen
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Kristian
Top achievements
Rank 1
Rank 1
answered on 26 Mar 2012, 06:38 PM
Hi Rumen,
I am having troubles with this error as well. Which file do you implement your quickfix to?
Best regards,
Kristian Thrane
I am having troubles with this error as well. Which file do you implement your quickfix to?
Best regards,
Kristian Thrane
0
Hi Kristian,
I missed the file attachment in my earlier post but it is available for download in the bug report page http://code.google.com/p/chromium/issues/detail?id=67782. The EditableIFrame.html file does not offer a fix, but shows that this is Chrome related issue.
The only solution that we could offer, until the WebKit developers fix the problem, is to render the content area of RadEditor as an editable <div> by setting the ContentAreaMode property to "Div".
Best regards,
Rumen
the Telerik team
I missed the file attachment in my earlier post but it is available for download in the bug report page http://code.google.com/p/chromium/issues/detail?id=67782. The EditableIFrame.html file does not offer a fix, but shows that this is Chrome related issue.
The only solution that we could offer, until the WebKit developers fix the problem, is to render the content area of RadEditor as an editable <div> by setting the ContentAreaMode property to "Div".
Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Karthikbabu
Top achievements
Rank 1
Rank 1
answered on 29 Nov 2012, 10:59 AM
We are using telerik controls (RAD) in Sitecore and facing the same problem, also in Safari browser. The CSS class names from Apply CSS dropdown showing in lower-case instead of actual one. (e.g. .footNote --> .footnote).
0
Ivan
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2012, 08:19 AM
Could it be that HTML markup created by RADEditor control is missing DOCTYPE directive in it? Please take a look at the response in the ticket for Chrome.
This seem to work fine in the attached /editableiframe.html file if you make "iframe" body as this:
Could you confirm whether you get the same behavior on your side.
This seem to work fine in the attached /editableiframe.html file if you make "iframe" body as this:
var sMarkup = "<!DOCTYPE html>" +
"<html><head><title>New Document</title></head>" +
"<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
" </body></html>";
"<html><head><title>New Document</title></head>" +
"<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
" </body></html>";
Could you confirm whether you get the same behavior on your side.