Cell Padding issue

14 posts, 0 answers
  1. claudz
    claudz avatar
    39 posts
    Member since:
    Jul 2007

    Posted 10 Aug 2010 Link to this post

    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
  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 13 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 21 Oct 2010 Link to this post

    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
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 22 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 25 Oct 2010 Link to this post

    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

  7. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 27 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 29 Oct 2010 Link to this post

    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

  9. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 03 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 03 Nov 2010 Link to this post

    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
  11. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 03 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 03 Nov 2010 Link to this post

    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
  13. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 08 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. Abhishek
    Abhishek avatar
    13 posts
    Member since:
    Sep 2010

    Posted 09 Nov 2010 Link to this post

    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.
  15. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 09 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017