[Solved] RadEditor picks up css based template margin

[Fonny]

My css contains:

*

html body

{

/*IE6 hack*/

padding: 0 0 0 250px; /*Set value to (0 0 0 WidthOfFrameDiv)*/

}

This is to make sure the content of the page starts 250px from the left. However, RadEditor also picks up that margin. When I type inside the radeditor, it does not start from the left. It starts 250px from the left

[Rumen]

Hi Fonny,

By default, RadEditor reads all styles on the page and in your scenario the properties of the body setting overrides the default styles of RadEditor.

Nevertheless, you could easily specify just the css files you want loaded in the editor by using its CssFiles property - this is how the editor will not pick up the styles from the parent page. The following online demo shows how to use the CssFiles property - Setting Content Area Defaults and External CSS Files.

In your scenario you can set the CssFiles property like this:

<telerik:RadEditor  
       ID="RadEditor1"
       ContentAreaCssFile="~/stylesheet.css"
       runat="server">
</telerik:RadEditor>

Thus the editor will load only the styles from the stylesheet.css in the stylesheet.css file.

To style the elements in the content area you need to define global css classes for them, e.g. body, table, td, th in the stylesheet.css file:

body
{
    background-color: White !important;
    color: Black !important;
    font-family: Arial !important;
    font-size: 10px !important;
    padding:3px;
    background-image: none;
    margin: 0px;
    text-align: left;
    scrollbar-face-color: #E9E9E9;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-shadow-color: #E9E9E9;
    scrollbar-3dlight-color: #DBDBDB;
    scrollbar-arrow-color: #787878;
    scrollbar-track-color: #F5F5F5;
    scrollbar-darkshadow-color: #AEAEAE;
    word-wrap: break-word;
}

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Fonny]

I follow the steps of creating css file and assign RadEditor’s ContentAreaCssFile to that css.

 

However, it still does not work for me

 

The css file:

body

{

      padding: 0px; /*Set value to (0 0 0 WidthOfFrameDiv)*/

      margin: 0px;

}

 

 

<telerik:RadEditor ID="edContent" runat="server" Skin="Mac" ContentAreaCssFile="../App_Themes/jHelpTheme/Editor.css">

                              

</telerik:RadEditor>

[Rumen]

Hello Fonny,

Just set  !important  after the padding and margin values of  0px in your editor.css file:

body
{
      padding: 0px !important; /*Set value to (0 0 0 WidthOfFrameDiv)*/
      margin: 0px !important;
}

For your convenience I have attached my test project.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andrew wisener]

We have a similar issue with the editor loading in the pages styles regardless of wether we specify the ContentAreaCSS. In our case its much worse because we have a default style for lists and all the editor buttons look wrong. We did what you suggested and rediefined all our styles in the editor with Important.

I assume this is a bug and the editor is loading all styles no matter what. Is it in on the list for the next hotfix?

[Tervel]

Hi andrew,

It seems that you are referring to a different scenario. The editor exists as two parts - the wrapper and the toolbars - which belong to the parent page and inherit all CSS forced upon them from the parent page (such as global UL CSS definitions), and its content area (which is an IFRAME, and thus a separate document) - with separate rules about CSS.

The thread here discusses modifying and customizing what happens in the content area. When you talk about the tools, you refer to a different scenario.

The RadEditor for ASP.AJAX uses semantic rendering - that is its tools are rendered using UL and LI tags.
Forcing a global UL, LI css styles on the page is likely to produce side effects. The same is true if the editor was using TABLE and TD, and you had those defined as global. Whatever rendering the editor has, there is always a scenario where a developer decides to put in in a page with some global CSS defined that breaks the look. This is not a bug in the editor, rather this is how CSS works.

There are two options with this:
1. You introduce classes for UL and LI and start using those, not using global definitions anymore

2. You "undo" your changes by wrapping the editor into a parent element, e.g. DIV that "undoes" your global settings, e.g.

<style>
/* Global style */
UL
{
    color:red;
}

/* Undo the change */
.undoWrapper UL
{
  color:black;
}
</style>

<div class="undoWrapper">
    <telerik:RadEditor ......></telerik:RadEditor>
</div>


Kind regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andrew wisener]

Hi Tervel,

Thanks for the Reply, Telerik support is excellent!

I think we have both issues:

1. CSS styles from the parent page imported into the editor Iframe
2. Global CSS styles affecting the list styling in the editor.

Is item 1 a bug? We find that even when we set the contentareacss the styling from the parent page is still applied, just as the poster of this thread indicated?

For Item 2 I'll follow it up with my designers, I can see your point. But now I've got the headache of going through the style sheets the designers built undoing the styles they specified globally and not only that I've got to set them to what the styles should be for the editor, inlcuding padding margins etc.

[Tervel]

Hello andrew,

Regarding issue #1: By default, unless specified otherwise, the editor will import all of the CSS existing on the parent page into its content area. This is needed, in order to create a smooth user experience with formatting matching the formatting on the page.

However, in scenarios where the editor is used in an admin environment to edit content that will appear on a public page, usually two different sets of CSS are used, Perhaps this is your case as well. Then, all you need to do is specify what CSS files the editor should load into its content are. This is done by using the CssFiles property. This is a collection whose items can be set either declaratively or from the codebehind. Please refer to the following online demo on how to use the CssFiles property (as well as the documentation):

http://www.telerik.com/demos/aspnet/prometheus/Editor/Examples/SettingContentAreaDefaults/DefaultCS.aspx


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andrew wisener]

Hey Tervel,

Back again, just been chatting with my designer. The best way to do CSS is a bit beyond me. But he reckons that for the styling of the radEditor toolbar lists you should be setting up the styling so our parent content styles can't interfere with them. He mentioned setting !important for your styles so they override ours. That way your product looks consistent and can't be messed up by a designer tweaking the look of our site.

I suspect in the end this won't be a big deal for us, we can just setup a one-off style that undoes all our parent styles. But I thought I'd pass on our designers comments anyway.

regards

Andrew

[andrew wisener]

Hi Tervel,

Aah yes that worked - adding:

<CssFiles>
     <telerik:EditorCssFile Value="/css/editor.css" />
</CssFiles>

fixed my problem, we were setting the ContentAreaCSSFile attribute expecting that to set our editor.css as the only css for the editor.

regards

Andrew