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

Font Size Inside Table

5 Answers 519 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Joel Kraft
Top achievements
Rank 2
Joel Kraft asked on 28 Jan 2008, 07:03 PM
I remember this being an issue with the classic radEditor, but cannot seem to sort out the fix for Prometheus.

Our stylesheet defines the text size as 11px, which shows up great in the editor... until you add a table.  When you are editing the table itself, the text inside any of the cells is always displayed at 16px.

In the old editor, you could put in a small chunk of CSS to reset the font-size value for the table.  I cannot figure out which classes need to be targeted to do this in the new version, though.  Any guidance?

Preferrably, this would be fixed in some newer version...
Joel

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 29 Jan 2008, 09:16 AM
Hello Joel,

Do you have any global styles that apply to TABLE, TD elements on the page with the editor? The problem could be related exactly to such a global TABLE or TD style with font-size: 16px; selector that is applied to the TABLE cells in the editor's content area.

Neverthless, you can easily fix the problem and override this styles, by setting the editor's ContentAreaCssFile property to point to your own external CSS file:

<telerik:RadEditor  
      
ID="RadEditor1"
      
ContentAreaCssFile="~/EditorContentAreaStyles.css"
      
runat="server">
</
telerik:RadEditor>

having the following class in it:


table
{
    BORDER-RIGHT: #999999 1px dashed;
    BORDER-BOTTOM: #999999 1px dashed;
}

table td
{
    font-size: 12px !important;
    font-family: Arial !important;

    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;
}

Please, note the use of the !important attribute after the values of the properties.

Since the
EditorContentAreaStyles.css is loaded first on purpose, it is possible for another global style to override its settings. If you want to prevent the overriding of the properties defined in the EditorContentAreaStyles.css file just set the !important attribute after their values.
 
Save the file and restart your browser to see the changes.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Joel Kraft
Top achievements
Rank 2
answered on 29 Jan 2008, 06:45 PM
Well I did check that before posting.  I do have some CSS on tables to control some border behavior, but I don't have anywhere in my CSS to set anything to 16px.

I think this is an editor issue, as I can reproduce the problem on your demo site:
  1. Select All of demo text
  2. Set font to 9px
  3. Insert table into the middle of the text
  4. Type into the table
You'll see at this point that the text in the table is at 16px, while everything outside of the table is still 9px.  I will have to look at some of these workarounds, but I would personally prefer not to have to install a bunch of hacks every time a new version comes out!! :-)

Joel
0
Rumen
Telerik team
answered on 30 Jan 2008, 09:44 AM
Hi Joel,

Did you try the provided solution in my previous post? The solution is not a hack but a standard way to specify the content area appearance in RadEditor "Prometheus". By default, RadEditor displays the content and the content in tables with the default font of the browser. If you want to set a default 11px font-size in the TABLEs inside RadEditor then you should declare a global table td class in an external css file

table td
{
    font-size: 11px !important;
    font-family: Arial !important;

    PADDING: 1px;
    BORDER-TOP: #999999 1px dashed;   
    BORDER-LEFT: #999999 1px dashed;   
}

and set the
ContentAreaCssFile property to point to it.

You can find more information in the following help articles:
Default Font for Editable Content
and
Setting Editor Background And Color.

In addition to this - you could easily specify just the css files you want loaded in the editor by using its CssFiles property - this is how the editor will not pick up the styles from the parent page. The following online demo shows how to use the CssFiles property: Setting Content Area Defaults and External CSS Files.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Joe
Top achievements
Rank 2
answered on 07 Feb 2008, 07:15 PM
Hi,
I had the same problem and your instructions work.... but there is still an issue related to using em vs. px. I'm using em for accessibility reasons.

Say I have the following CSS files:
default.css:
body has font-size: .8em;

content.css (rad editor uses this as the EditorCSSClass):
#custom td has font-size: .8em !Important;

That works fine in the editor, but after a page is updated and I view the "live" page, everything inside #custom td is extra small due to "stacked" .8em tags. Make sense?

Now if I go back and remove .8em from default.css, this messes up all text outside of #custom td, which is the majority of content.

Finally, I saw that one option is to manually edit the radeditor css file, but I'd prefer to keep using a built-in skin since it doesn't require the extra files, etc... And I'm not sure this approach would even solve my issue.

So is there anything I can do to ensure that em font sizes inside tables are consistent between the editor and the front-end "live" view?

Also, I should note that I'm note concerned about the disabled editor <div> instead of iframe situation.

Thanks for any help,
Joe

p.s. I would really not like to use tables at all, but the editor isn't very <div> friendly when it comes to the average end user. Editing content inside a div is still fairly painful.
0
Martin
Telerik team
answered on 12 Feb 2008, 06:57 AM
Hello Joe Hakooz,

We had difficulty understanding your issue. I would like to ask you to send us a small running project which manifests the problem along with detailed description of it and the results you want to achieve.

Best wishes,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Editor
Asked by
Joel Kraft
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Joel Kraft
Top achievements
Rank 2
Joe
Top achievements
Rank 2
Martin
Telerik team
Share this question
or