RadEditor and style sheets

[michelle]

 

The RadEditor doesn't seem to pick up the styles from the content style sheet.  In particular, when a table is created in the RadEditor, the expected behavior is the default table style (see style sheet definition below) should be applied.  This is the saved content table tag:

<P>  <TABLE>  <TBODY>  <TR>  <TD>one&nbsp;</TD>  <TD>&nbsp;two</TD>  <TD>&nbsp;three</TD></TR>  <TR>  <TD>&nbsp;</TD>  <TD>&nbsp;</TD>  <TD>&nbsp;</TD></TR>  <TR>  <TD>&nbsp;</TD>  <TD>&nbsp;</TD>  <TD>&nbsp;</TD></TR></TBODY></TABLE></P>

Note there is no black solid border applied as defined in the style sheet.  This causes the saved data to display with no table border in a report created from this saved data.

How can I correct this?

Thanks!
Michelle

Here is the Control declaration in the .aspx page:<
<telerik:RadEditor ID="RadEditor1" runat="server" Skin="Web20" Height="800px" Width="975px" NewLineBr=false Style="overflow: scroll"

 

 

 

EnableEmbeddedScripts="False" EditModes="Design" OnClientLoad="OnClientLoad" >

 

 

 

<CssFiles>

 

 

 

<telerik:EditorCssFile Value="~/css/EditorContentArea.css" />

 

 

 

</CssFiles>

 

 

 

</telerik:RadEditor>

EditorContentArea.css:

 

body

 

{

 

 

 

font-family

 

: Arial;

 

 

 

 

font-size

 

: 10pt;

 

}

 

 

 

table

 

 

 

{

 

 

border-color:Black;

 

 

 

border-width:1pt;

 

 

 

padding :2pt 2pt;

 

 

 

border-style:solid;

 

}

 

 

 

table

 

td

 

 

 

 

{

 

 

 

border-color:Black;

 

 

 

border-width:1pt;

 

 

 

padding :2pt 2pt;

 

 

 

border-style:solid;

 

 

 

font-family: Arial;

 

 

 

font-size: 10pt;

 

}

 

 

 

table

 

th

 

 

 

 

{

 

 

 

border-color:Black;

 

 

 

border-width:1pt;

 

 

 

padding :2pt 2pt;

 

 

 

border-style:solid;

 

}

 

 

 

.RadEWrongWord

 

 

 

{

 

 

background-color: yellow;

 

}

 

 

[Rumen]

Hi Michelle,

The CssFiles property just applies the styles from an external css file(s) to the content area and its content, but it does not modify the HTML markup and does not apply any inline style attributes to the content. This property is used to style the appearance of the content area inside the editor.

That is why if the same css classes are not applied to the public site, then the content could look different once it is displayed outside of the editor. What you should do is to import the same css file(s) as in the editor to the public site with LINK tags or inside STYLE tags.

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[michelle]

The table is created within the Rad Editor using the "table" icon from the Rad Editor toolbar.  The tag shown in the example below is saved to the database from the Rad Editor. According to your answer "CssFiles property just applies the styles from an external css file(s) to the content area and its content", it seems that because the table is created by the tool on the Rad Editor toolbar and is part of the content of the Rad Editor, the style sheet defining the default look for tables created within the Rad Editor (CssFiles property setting) should apply.  Linking the style sheet to the parent page using <LINK> changes the appearance of all tables on the page, which is not the desired behavior. 

How do I get the the appropriate styles applied to a table that is created as Rad Editor content using the "table" icon on the Rad Editor toolbar?

Michelle

[michelle]

Please note that in the example code below, the styles for body and RadEWrongWord are applied to the content area correctly.

Thanks!
Michelle

[Rumen]

Hi Michelle,

The default styles for table elements are available in the following help article:

Content Area Appearance Problems.

Here they are:
table
{
   BORDER-RIGHT: #999999 1px dashed;
   border-bottom: #999999 1px dashed;
}
table td
{
   PADDING: 1px;
   border-top: #999999 1px dashed;
   BORDER-LEFT: #999999 1px dashed;
}
table th
{
   PADDING: 1px;
   border-top: #000000 1px dashed;
   BORDER-LEFT: #000000 1px dashed;
}

Greetings,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[michelle]

Still not able to get the default styles to apply when a table is created from the table wizard in the Rad Editor.  I am able to get the style listed in the "apply css" dropdown, so I guess this will have to do.  Had to change the css definition to include table .td, table .th in order to get the styles picked up by the dropdown control within the Rad Editor control.  Note the "." before td and th.

Thanks!
Michelle

[Rumen]

Hi Michelle,

It will be best to open a support ticket and send a sample working project that demonstrates your scenario. I will examine it and provide a solution after that.

Please, include steps and screenshots of the observed and expected appearance.


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.