Font Size Inside Table

6 posts, 0 answers
  1. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 28 Jan 2008 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 29 Jan 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 29 Jan 2008 Link to this post

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

    Posted 30 Jan 2008 Link to this post

    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
  6. Joe Hakooz
    Joe Hakooz avatar
    65 posts
    Member since:
    Dec 2007

    Posted 07 Feb 2008 Link to this post

    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.
  7. Martin
    Admin
    Martin avatar
    585 posts

    Posted 12 Feb 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017