ContentArea Iframe not using css styles in custom stylesheet

2 posts, 0 answers
  1. Paul Robertson
    Paul Robertson avatar
    78 posts
    Member since:
    May 2010

    Posted 17 Nov 2011 Link to this post

    Hi there

    I have a radEditor that is set to render its content area as an IFrame, using a custom version of EditorContentArea.css. The problem is, that the styles in the custom stylesheet file do not seem to be utilised by the elements in the rendered IFrame.

    The IFrame is rendered as this in Firefox:

    <iframe frameborder="0" style="width: 100%; height: 100%; margin: 0px; padding: 0px;" id="[myeditorclientid]_contentIframe">

    <html>
    <head></head>
    <body>
    <div class="editorcontentdiv2">
    <p class="editorcontent2">My dog has no nose</p>
    </div>
    </body>
    </html>

    </iframe>


    The markup for the editor is provided with the correct location for the css file in question:

    <CssFiles>
    <trk:EditorCssFile Value="~/App_Themes/PD_RadSkins/PD_RadSkin_1/EditorContentArea.PD_RadSkin_1.css" />
    </CssFiles>

    and I also use a preload routine to add all the required CSS files for the page in Page_Load, something like this:

    AddCss("~/App_Themes/PD_RadSkins/PD_RadSkin_1/EditorContentArea.PD_RadSkin_1.css", Me.Page)

    This method works for all the other CSS files, but when it comes to the IFrame content, the custom styles in my EditorContentArea css file are not applied. Sure enough, when I examine the <p> or <div> elements of the generated markup, e.g. in Firebug, it reports that: "The element has no style rule".

    What could be causing this situation? Please don't advise using DIV mode, I need the IFrame functionality.

    Thanks for any advice you can provide.



     




  2. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 22 Nov 2011 Link to this post

    Hi Paul,

    Actually the CssFiles property works only for Iframe mode, because the div mode is part of the current page and all styles are directly applied to the contents of the div.

    My suggestion is to load the EditorContentArea.PD_RadSkin_1.css file through the ContentAreaCssFile property as shown in this demo: Setting Content Area Defaults. The name of the file should not be a problem, but just for the test rename it to a word without punctuation symbols as RadEditorSkin.css.

     If you still experience the problem isolate it in a sample project and send it for examination by opening a support ticket.


    Best wishes,
    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
Back to Top