CSS Child selector & pseudo class not working

2 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 10 Sep 2012 Link to this post


    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?


  2. Rumen
    Rumen avatar
    12782 posts

    Posted 11 Sep 2012 Link to this post


    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' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";
      var contentStart = doctypeStr;
      doctypeStr.indexOf("xhtml") > -1 ? contentStart += "<html xmlns=\"http://www.w3.org/1999/xhtml\">" : 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.
  3. DevCraft R3 2016 release webinar banner
Back to Top