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

CSS Child selector & pseudo class not working

1 Answer 128 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
HSLaw asked on 10 Sep 2012, 05:40 AM


We tried following css in the EditorCssFile but it is not working in the editor rendering.

1. Child selector (first descendant).

.rb-inner-small > div .rb-text-small strong{font-size:12px}

2. Pseudo class

div[class^="r-header-small"]{position: relative; width:207px; height:134px}

Is it supported in the editor or there is other way to do this?


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 Sep 2012, 02:36 PM

The content area of RadEditor is a standard editable iframe (rendered in quirksmode) or editable div according to the value of the ContentAreaMode property. Since quirksmode represents IE6 it is expected that these classes does not work.

What you can do is to add a DOCTYPE to the iframe. Here is an example how to set an XHTML DOCTYPE to the content area of RadEditor:
Copy Code
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
<script type="text/javascript">
function OnClientLoad(editor, args){
  var doctypeStr = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' ''>";
  var contentStart = doctypeStr;
  doctypeStr.indexOf("xhtml") > -1 ? contentStart += "<html xmlns=\"\">" : contentStart += "<html>";
  contentStart += "<head>";
  contentStart += "<title>RadEditor</title>";
  contentStart += "</head>";
  contentStart += "<body>";
  var contentEnd = "</body>";
  contentEnd += "</html>";
  var editorContent = editor.get_html();
  //You can extend the code in order to check if the HEAD / BODY tags already
  //and if the !DOCTYPE is actually tag or a text inside the content
  if (editorContent.indexOf("!DOCTYPE") < 0)
  editorContent = contentStart + editorContent + contentEnd;
   alert("RadEditor's content already got a DOCTYPE");

Another approach is to render the content area as an editable DIV by setting ContentAreaMode="Div". The DIV is part of the current page and will use its DOCTYPE.

If the tags are still not applied test with an editable div/iframe and see whether this is not a browser issue:

<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">
    <style type="text/css">
      .rb-inner-small > div .rb-text-small strong{font-size:12px}
    add here your content

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question