Cell Padding issue

[claudz]

Hi Telerik,

We have MOSS 2007 and IE8, and are currently testing RadEditor 5.8.0.0.

I understand that the cellpadding attribute does not apply in design view, because it gets overriden by RadEditor styles.

I followed the article on http://www.telerik.com/support/kb/aspnet-ajax/editor/cellpadding-and-cellspacing-do-not-apply-in-design-mode.aspx, by creating a css file called EditorContentAreaStyles.css in the Resources folder.

The EditorContentAreaStyles.css file that I created consists of the following (without the padding):

/* _lcid="1033" _version="12.0.4518"
    _LocalBinding */

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

Then in the ConfigFile.xml, I added the following property:

<property name="ContentAreaCssFile">
              <item>/_wpresources/RadEditorSharePoint/5.8.0.0__1f131a624888eeed/Resources/EditorContentAreaStyles.css</item>
</property>

However, still, after this change, whenever cell padding is defined in the Table Properties tab, it is not applied in design view, nor is applied once I check-in or publish the page. Am I missing something?

Thanks,
Claudz

[Stanimir]

Hello Claudz,

The cssFiles collection can not be set in the ConfigFile.xml.

You can find helpful information on the matter in the following online help article:
Defining custom CSS styles



Greetings,
Stanimir
the Telerik team

[Abhishek]

Hi Stanimir,

The cellpadding in Radeditor is not working. Can you please suggest what needs to be changed.
Please have a look below what I have used:

<table style="width: 100%;" cellspacing="0" cellpadding="10" border="1">
    <tbody>
        <tr>
            <td style="background-color: #fbd5b5;">&nbsp;bvnfhnd</td>
            <td style="background-color: #d7e3bc;">&nbsp;dfhg</td>
        </tr>
        <tr>
            <td style="background-color: #d8d8d8;">&nbsp;dfhfdgh</td>
            <td style="background-color: #8db3e2;">&nbsp;dfghdfgh</td>
        </tr>
    </tbody>
</table>

But this is not effecting. Please suggest.

Thanks & Regards,
Abhishek

[Rumen]

Hello Abhishek,

Please, see this help article: Content Area Appearance Problems.
The content area of RadEditor is styled by the following tags:

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;
}
which change the appearance of the table elements.

You can easily override the default content appearance by setting the CssFiles property to load an empty css file or a file which does not contain the above classes.

<telerik:RadEditor ID="RadEditor1" Runat="server" ContentAreaCssFile="~/empty.css">
   <CssFiles>
       <telerik:EditorCssFile Value="~/empty.css" />
   </CssFiles>
</telerik:RadEditor>

You can also set the ContentAreaCssFile property to point to the external css file.

Best wishes,
Rumen
the Telerik team

[Abhishek]

Hi Rumen,

Thanks for you sugestion.
I am using an External css class file "CssEditor.css". ther I have overridden the default style like he following:
 

table

{

}

table td{}

 

table th{}

 

 

 

But still the cellpadding is not working in publish mode but in edit mode it's working.
Please suggest. Waiting for your reply.

 

Thanks,

Abhishek

[Stanimir]

Hi Abhishek,

Could you provide me with your ToolsFile.xml, ConfigFile.xml and CssEditor.css. I will use them in order to reproduce the issue on our test server and advise you further.

Thank you.

Kind regards,
Stanimir
the Telerik team

[Abhishek]

Hi Stanimir,

The files are as follows:

ToolsFile.xml:

<

 

root>

 

<

 

modules>

 

<

 

module name="RadEditorDomInspector" />

 

</

 

modules>

 

<

 

tools name="MossTools1">

 

<

 

tool name="AjaxSpellCheck" />

 

<

 

tool name="FindAndReplace" />

 

<

 

tool separator="true" />

 

<

 

tool name="Cut" shortcut="CTRL+X" />

 

<

 

tool name="Copy" shortcut="CTRL+C" />

 

<

 

tool name="Paste" shortcut="CTRL+V" />

 

<

 

tool separator="true" />

 

<

 

tool name="Undo" shortcut="CTRL+Z" />

 

<

 

tool name="Redo" shortcut="CTRL+Y" />

 

<

 

tool separator="true" />

 

<

 

tool name="MOSSLinkManager" shortcut="CTRL+K" />

 

<

 

tool name="Unlink" shortcut="CTRL+SHIFT+K" />

 

<

 

tool name="ImageManager" shortcut="CTRL+G" />

 

<

 

tool name="MOSSTemplateManager" />

 

<

 

tool separator="true" />

 

<

 

tool name="MOSSInsertTable" />

 

<

 

tool name="SetTableProperties" />

 

<

 

tool name="ToggleTableBorder" />

 

<

 

tool separator="true" />

 

<

 

tool name="MOSSInsertTableElement">

 

<

 

tool name="InsertRowAbove" />

 

<

 

tool name="InsertRowBelow" />

 

<

 

tool name="InsertColumnLeft" />

 

<

 

tool name="InsertColumnRight" />

 

<

 

tool name="DeleteRow" />

 

<

 

tool name="DeleteColumn" />

 

<

 

tool name="SplitCell" />

 

</

 

tool>

 

<

 

tool name="MergeColumns" />

 

<

 

tool separator="true" />

 

<

 

tool name="ToggleSource" />

 

<

 

tool name="FormatStripper" />

 

<

 

tool separator="true" />

 

<

 

tool name="MOSSRightToLeft" />

 

<

 

tool name="MOSSLeftToRight" />

 

<

 

tool separator="true" />

 

<

 

tool name="ForeColor" />

 

<

 

tool name="BackColor" />

 

</

 

tools>

 

<

 

tools name="MossTools2">

 

<

 

tool name="ApplyClass" />

 

<

 

tool name="FormatBlock" />

 

<

 

tool separator="true" />

 

<

 

tool name="FontName" />

 

<

 

tool name="FontSize" />

 

<

 

tool separator="true" />

 

<

 

tool name="Bold" shortcut="CTRL+B" />

 

<

 

tool name="Italic" shortcut="CTRL+I" />

 

<

 

tool name="Underline" shortcut="CTRL+U" />

 

<

 

tool separator="true" />

 

<

 

tool name="JustifyLeft" />

 

<

 

tool name="JustifyCenter" />

 

<

 

tool name="JustifyRight" />

 

<

 

tool separator="true" />

 

<

 

tool name="InsertOrderedList" />

 

<

 

tool name="InsertUnorderedList" />

 

<

 

tool separator="true" />

 

<

 

tool name="Indent" />

 

<

 

tool name="Outdent" />

 

</

 

tools>

 

<

 

contextMenus>

 

<

 

contextMenu forElement="*">

 

<

 

tool name="Cut"/>

 

<

 

tool name="Copy"/>

 

<

 

tool name="Paste"/>

 

</

 

contextMenu>

 

</

 

contextMenus>

 

<

 

classes>

 

<

 

class name="Clear Class" value="" />

 

<

 

class name="Novartis-Text" value=".nvs-radText" />

 

<

 

class name="Novartis-Title" value=".nvs-radTitle" />

 

</

 

classes>

 

</

 

root>

 

ConfigFile.xml

<?

 

xml version="1.0" encoding="utf-8" ?>

 

<!--

 

==============================================================================================

 

Config File valid structure:

<configuration>

<property>...</property>

...

<property>

<item>...</item>

<item>...</item>

...

</property>

...

</configuration>

===============================================================================================

 

-->

 

<

 

configuration>

 

<

 

property name="ToolbarMode">ShowOnFocus</property>

 

<

 

property name="ToolsWidth">680px</property>

 

<

 

property name="OnClientLoad">OnClientLoad</property>

 

<

 

property name="MaxImageSize">4096000</property>

 

<

 

property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.7.2.0__1f131a624888eeed/Resources/CssEditor.css</property>

 

</

 

configuration>

 

CssEditor.css

.nvs-radText

{

 

font-family: Verdana;

 

 

font-size: 10px;

 

}

.nvs-radTitle

{

 

font-family: Verdana;

 

 

font-size: 12px;

 

 

font-weight: bold;

 

 

color: #923222;

 

}

body

{

 

font-family: Verdana;

 

 

font-size: 10px;

 

}

li

{

 

padding-left:5px;

 

 

list-style-position:inside;

 

 

list-style-type: disc!important;

 

}

 

table

{

}

table

 

td

 

{

}

table

 

th

 

{

}

 

Please suggest where to change.

Thanks,
Abhishek

[Stanimir]

Hello Abhishek,

Here is what to do in order to disable the default table styling in RadEditor Design mode:
1. Modify the respective ConfigFile.xml or ListConfigFile.xml and add the following lines:

<property name="OnClientLoad">OnClientLoad</property>
<property name="OnClientModeChange">OnClientModeChange</property>

2. Add the following javascript code in the MOSSEditorTools.js, which is located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder:

function OnClientLoad(editor, args)
{
    editor.fire("ToggleTableBorder");
}

function OnClientModeChange(editor, args)
{
    var mode = editor.get_mode();
    switch (mode)
    {
        case 1:
            //We are in Design mode
            editor.fire("ToggleTableBorder");
            break;
    }
}

Also you should know that you can not overwirte css styling by adding code such as:

table
{

}

table td
{

}

table th
{

}

Greetings,
Stanimir
the Telerik team

[Abhishek]

Hi Stanimir,

Thanks for your reply. It is working in design mode but not working on publish mode.
Please refer the screen shots.

Please suggest.

Thanks,
Abhishek

[Stanimir]

Hi Abhishek,

You need to check what styling is applied on the tables in publishing mode. There might be some MOSS global styles which are applied on the tables. In order to check the styling use a tool such as FireBug for Firefox or IE developers toolbar for Internet Explorer.


Kind regards,
Stanimir
the Telerik team

[Abhishek]

Hello Stanimir,

I have checked with IE developers toolbar for Internet Explorer. There I have found one class is there top of the table. I have also searched for the attributes which is disabling the cellpadding but couldn't find anything like that. Can you plese let me know what exact property can disable the cellpadding?
ms-WPBody is the class which is there on the top of the table. I am sending you the class attributes.

#nvs-left .ms-WPBody
{
 border: 1px solid #D8D0CA;
 border-top: none;
}
#nvs-threeColRight .ms-WPBody, #nvs-multiRight .ms-WPBody
{
 border: 1px solid #D8D0CA;
 border-top: none;
}
div#nvs-page .ms-WPBody
{
 color: #333333;
 font-size: 10px;
}
div#nvs-page .ms-WPBody a:hover
{
 color: #EC8026;
 text-decoration: underline;
}
div#nvs-page .ms-WPBody td
{
 font-size: 10px;
 font-family: Verdana;
}
div#nvs-page .ms-WPBody A:link, div#nvs-page .ms-WPBody A:visited
{
 color: #923222;
 text-decoration: underline;
}
div#nvs-page .ms-WPBody A:hover
{
 color: #ec8026;
 text-decoration: underline;
}
#nvs-page .ms-WPBody
{
 padding: 10px;
}

#nvs-page .nvs-WebPartZone .ms-WPBody
{
 padding: 0px;
}
#nvs-multiLeft .ms-WPBody, #nvs-oneCol .ms-WPBody, #nvs-threeCol .ms-WPBody
{
 /*border: 1px solid dotted #CFCFCF;*/
 border: 1px solid #CFCFCF;
 border-top: none;
}
#nvs-left .ms-WPBody
{
 border: 1px solid #D8D0CA;
 border-top: none;
}
#nvs-threeColRight .ms-WPBody, #nvs-multiRight .ms-WPBody
{
 border: 1px solid #D8D0CA;
 border-top: none;
}

Also attaching the screenshot. Waiting for your kind response.

Thanks,
Abhishek

[Stanimir]

Hello Abhishek,

In the provided styles the only thing that is related to padding is:

#nvs-page .ms-WPBody
{
 padding: 10px;
}

#nvs-page .nvs-WebPartZone .ms-WPBody
{
 padding: 0px;
}

So you can try overwriting these styles.

Sincerely yours,
Stanimir
the Telerik team

[Abhishek]

Hi Stanimir,

I have disable the attributes of those class like the following but still I am not getting cell padding effect. Can you please let me know what needs to over written there in that class.

#nvs-page .ms-WPBody

{

 /*padding: 10px;*/

}

 

#nvs-page .nvs-WebPartZone .ms-WPBody

{

 /*padding: 0px;*/

}

Waiting for your kind response.

Thanks,
Abhishek.

[Stanimir]

Hi Abhishek,

Open an official support ticket. In it you can provide me with a saved version of your page or a live URL where I can review the page layout. After I review it I will be able to advise you further.

Best wishes,
Stanimir
the Telerik team