[Solved] Add CSS file to modify <p> style in editor iframe

[Vince]

Hello,

In our application, we need to make <p> looks similar to <br> so we want to set its margin to 0. However, the editor iframe will take the style from the page which sets p {margin: 0 0 1em;}. I tried to hook up a custom style sheet when creating the text editor by the following code snippet:

@(Html.Telerik().Editor().StyleSheets(styleSheets => styleSheets.Add("~/Styles/Telerik/editor.custom.css")))

and I have

p
{
    margin: 0;
}

in my editor.custom.css, but it's not picking up by the editor. The style of <p> tag is still {margin: 0 0 1em;}

Did I miss something? Or is there an alternative way to set the style of <p> tag inside iframe editor? This is tested in FF4 and IE9, both are not working.

[Dimo]

Hello Vince,

One of the purposes of using an iframe for the Editor's editable area is to prevent styles from the main page to cascade into the editable area, which is practically a separate HTML document. What you are describing is rather odd and I can't reproduce it on my side (e.g. by modifying this demo locally - http://demos.telerik.com/aspnet-mvc/editor/styles).  Please double check. If the problem persists, you can send us a live URL or a demo, which reproduces the issue, so that we can take a look.

Greetings,
Dimo
the Telerik team

[Vince]

Hi Dimo,

I tried to move the editor outside of our jQuery template and it will pick up the custom CSS file now. Have you tried adding the editor in a jQuery template and see whether it applies custom css files? Is there a workaround to allow this? I really need to have the editor in the jQuery template. Thanks,

Vince

[Alex Gyoshev]

Hello Vince,

By jQuery template, do you mean the jQuery templating module? Can you please send the relevant code so that we may debug the problem?

All the best,
Alex Gyoshev
the Telerik team

[Vince]

Yes I mean jQuery templating module. The attach is a test prototype I created for this. You will find that editor inside template will not pick up custom css. Please take a look. Thanks,

Vince

[Alex Gyoshev]

Hello Vince,

The editor in the template did not work at all because it was not initialized. Since every editor needs a unique name in order to work, the template should define it like this: .Name("${Name}"). This way, you can populate the template with a unique editor by using .tmpl({ Name: "myEditor1" }), and initialize the editor by calling the tEditor jQuery plugin.

I am attaching the modified example.

Regards,
Alex Gyoshev
the Telerik team