Paul Robertson
Top achievements
Rank 1
Rank 1
Paul Robertson
asked on 17 Nov 2011, 09:56 PM
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.
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.
1 Answer, 1 is accepted
0
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
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