This is a migrated thread and some comments may be shown as answers.

Boarder missing around the table inserted into the word processor

3 Answers 165 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jiten
Top achievements
Rank 1
Jiten asked on 10 Mar 2011, 01:29 PM
Hello,

I insert table in the Word Processor of RadEditor but table border is missing.
How could i setting the border of table insert into word Processor.

Important thing is table appears the dashed line instead of a solid line.
Please help me as soon as possible.
Thanks.

Best Regards
Mutum Jiten Singh
Akhil Systems Pvt. Ltd.

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 15 Mar 2011, 10:50 AM
Hello Mutum,

Did you use the Insert Table or the Table Wizard dialog to insert a table. The Insert Table dropdown just inserts a table without a border. The dashed border is applied by a CSS class, so that the tables without borders are visible in the content area. If you want to apply a border when inserting a table through the Insert Table tool use the OnClientPasteHtml event as shown in this demo: OnClientPasteHtml.

If you insert a table with applied border in the Table Wizard and the border is still not visible this could be due to some global CSS class for TABLE, TR, TD elements that is overwriting the table appearance. In this case set the CssFiles property to point to an external CSS file as explained in this demo: Content Area Appearance Problems.

Best regards,
Rumen
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Jiten
Top achievements
Rank 1
answered on 16 Mar 2011, 11:43 AM
Hello,

It work in the insert table but not work through wizard table(still border is dash not solid).
thanks for your helping.

I copy the css file and paste into our custom stylesheet.css but not work.
Below are the css code which i paste.

<telerik:RadEditor ID="RadEditor1" runat="server">

    <CssFiles>

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

    </CssFiles>

</telerik:RadEditor>

By default, RadEditor loads the classes listed below from its default EditorContentArea.css (which is embedded in the Telerik.Web.UI.dll). You can copy these classes to your custom EditorContentArea.css which will be loaded by the CssFiles property:


.RadEWrongWord

{

    background-color: yellow;

}

.RadEDomMouseOver

{

    background-color:#ffffcc;

}

body

{

    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;

}

form

{

    background-color:#efefef;

    border:1px dashed #555555;

}

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;

}

You can also style other elements in the editor's content area by adding their respective global css class. For example, to modify the ordered and unordered list shapes and its sublists in the content area put the classes below in the EditorContentArea.css file:

OL

{

    list-style-type: upper-roman;

}

OL OL

{

    list-style-type: decimal;

}

UL

{

    list-style-type: square;

}

UL UL

{

    list-style-type: disc;

}



Please help me again
Thanks you for your helping.

Best Regards
Mutum Jiten Singh
Akhil Systems
0
Marin Bratanov
Telerik team
answered on 18 Mar 2011, 04:29 PM
Hi Jiteni,

Please note that by default the Editor does not apply borders to a newly created table. The dashes you see are created by a content area CSS file, so that the user sees that there is a table. In the file you copied please note the table rules:
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;
}

They all read "dashed", so it is expected that the table borders in design mode will be dashed unless you modify these rules to meet your preference or set a table style explicitly. To apply borders that will be visible in the final HTML you can use the Style Builder to choose the desired properties. To open the Style Builder right click in the table, select Table Properties, in the Table Properties tab click on the Style Builder icon and select the Borders tab.


All the best,
Marin
the Telerik team
Tags
Editor
Asked by
Jiten
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jiten
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or