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

    Hi,



    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?



    Thanks.

  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 11 Sep 2012 Link to this post

    Hi,

    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">
    <Content>
    </Content>
    </telerik:RadEditor>
    <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;
      editor.set_html(editorContent);
      }
      else{
       alert("RadEditor's content already got a DOCTYPE");
      }
    }
    </script>

    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}
        </style>
        add here your content
    </div>

    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top