Font-size for elements not resizing based on css file

8 posts, 1 answers
  1. Kevin
    Kevin avatar
    28 posts
    Member since:
    Dec 2008

    Posted 30 Oct 2012 Link to this post

    I am having a problem where the radeditor is setting all of the elements that do not have a font-size specifically applied to the element to 16px.  I have set the css file to 13px !important.  However that doesn't seem to work.  Attached is a screen shot of firebug showing that the computed font-szie is 16px but it shows the inherited font sizes as 13px.  If I just set the body font but don't style it with !important then it shows that the font size is overwritten but it doesn't show the style that is overwriting it. 
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Oct 2012 Link to this post

    Hi Kevin,

    Here is the sample code that I tried based on your scenario which works as expected.

    ASPX:
    <telerik:RadEditor ID="RadEditor1" ContentAreaCssFile="Style.css" Runat="server"  >
    </telerik:RadEditor>

    Style.css
    body
    {
      font-size:16px !important;
    }

    Please provide your full code if the issue persists.

    Thanks,
    Princy.
  3. Kevin
    Kevin avatar
    28 posts
    Member since:
    Dec 2008

    Posted 31 Oct 2012 Link to this post

    Thanks for getting back to me.  Here is the code:

    <div id="SpannedWrapper">
        <div style="text-align:left; margin: 10px 0px;">
            Page Title: <telerik:RadTextBox ID="PageTitle" runat="server"></telerik:RadTextBox>
        </div>
        <div id="TabbedPanel" class="space">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Web20" MultiPageID="HomeInfo"
                SelectedIndex="0" Align="Left" ReorderTabsOnSelect="true">
                <Tabs>
                    <telerik:RadTab Text="Edit Page"></telerik:RadTab>
                    <telerik:RadTab Text="Security"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="PageProperties" runat="server" SelectedIndex="0" CssClass="pageView">
                <telerik:RadPageView ID="Editors" runat="server">
                    <Telerik:RadEditor ID="PageEditor" Runat="server" OnClientModeChange="OnClientModeChange"></Telerik:RadEditor>
                </telerik:RadPageView>
                <telerik:RadPageView ID="SecuritySettings" runat="server">
                    <div id="UserListWrapper">
                        <asp:CheckBoxList ID="UsersList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"></asp:CheckBoxList>
                    </div>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
        <div class="defaultBoxSubmit">
            <asp:Button ID="Save" runat="server" Text="Save Page" CssClass="floatLeft" OnClick="SavePage_Click" ClientIDMode="Static" />
            <asp:Button ID="Cancel" runat="server" Text="Cancel" CssClass="floatLeft" OnClick="Cancel_Click" />
        </div>
    </div>

    here is where I am adding the css files

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        if (!IsPostBack)
        {
            EditorCssFile masterCSSFile = new EditorCssFile();
            masterCSSFile.Value = "/includes/css/master.css";
            PageEditor.CssFiles.Add(masterCSSFile);
     
            EditorCssFile editorCssFile = new EditorCssFile();
            editorCssFile.Value = "/includes/css/RadEditorStyle.css";
            PageEditor.CssFiles.Add(editorCssFile);
     
            List<SiteStyleSheet> listOfStyleSheets = new SiteStyleSheet().SelectStyleSheetsBySiteIDNotDeleted(ThisSiteID);
            for (int i = 0; i < listOfStyleSheets.Count; i++)
            {
                string customCSS = String.Format("/userFiles/styleSheets/{0}/{1}", ThisSiteName, listOfStyleSheets[i].StyleSheetUrl);
     
                PageEditor.CssFiles.Add(customCSS);
            }
     
            PageEditor.Height = 685;
            PageEditor.Content = Server.HtmlDecode(pageContent.PageContent);
            string[] imagepath = { String.Format("/userfiles/images/{0}", ThisSiteName) };
            PageEditor.ImageManager.UploadPaths = imagepath;
            PageEditor.ImageManager.ViewPaths = imagepath;
            PageEditor.ImageManager.DeletePaths = imagepath;
            PageEditor.ImageManager.MaxUploadFileSize = 10000000;
     
            string[] flashpath = { String.Format("/userfiles/flash/{0}", ThisSiteName) };
            PageEditor.FlashManager.UploadPaths = flashpath;
            PageEditor.FlashManager.ViewPaths = flashpath;
            PageEditor.FlashManager.DeletePaths = flashpath;
            PageEditor.FlashManager.MaxUploadFileSize = 10000000;
     
            string[] documentpath = { String.Format("/userfiles/siteDocuments/{0}", ThisSiteName) };
            PageEditor.DocumentManager.UploadPaths = documentpath;
            PageEditor.DocumentManager.ViewPaths = documentpath;
            PageEditor.DocumentManager.DeletePaths = documentpath;
            PageEditor.DocumentManager.MaxUploadFileSize = 10000000;
     
            PageTitle.Text = pageContent.PageTitle;
        }
    }

    Here's the CSS:
    body
    {
        font-family: Verdana, Book Antiqua, sans-serif;
        font-size:13px !important;
        font-weight:normal;
        color:#000000;
        background:#12575d;
        padding:30px 0px 0 0;
        line-height: 1.25em;
    }

    The css for anything that isn't specified specifically is defaulted to 16px.  Even though the font-size should be 13px from the cascade from the body.  While I can fix this by going in and performing a base reset of all elements to 13px this will cause a lot of problems because it should just cascade from the body and it would mess up my cascade effects from classes.
  4. Rumen
    Admin
    Rumen avatar
    14071 posts

    Posted 02 Nov 2012 Link to this post

    Hi,

    Check whether some of the CSS files imported via the CssFiles property is not importing the font-size.

    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Kevin
    Kevin avatar
    28 posts
    Member since:
    Dec 2008

    Posted 03 Nov 2012 Link to this post

    That was the first screen shot I sent.  Was a firebug screenshot showing the dynamic css file applying the font size via the html and body tag.  They are both set at 13px !important  html, body {font-size: 13px !important;} There's more than that but it's margin, padding and standard stuff.  When I look at it it shows that the body font-size is not being overwritten but when I look at the p tag it shows 16px instead of the 13px it should be inheriting.  I'm sure there's something in there doing that but I just can't find it. 
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Nov 2012 Link to this post

    Hi Kevin,

    This is indeed very odd behavior. The provided RadEditor configuration looks OK, however, we cannot fully test it without the specific CSS files added to the control and the content itself. Could you please provide sample fully runnable project reproducing the issue and or a live URL where we can examine the issue?

    In addition, could you please check if there is not Zoom set to the page? You can reset the browser zoom using Ctrl+0 shortcut.

    Kind regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Kevin
    Kevin avatar
    28 posts
    Member since:
    Dec 2008

    Posted 03 Feb 2013 Link to this post

    So I have determined that this has to do with tables in the iframe editor.  So the radeditor is in iframe mode, the end user places a table on the page and the drops text into the table.  By default the system uses the body font-size and cascades down to the table on the page.  However in the radeditor you can see that even if you set the font-size in the body with the !important operator.  The font is still overridden in the editor to be 16px.  If instead of putting the text in a table you put the text in a div then the font cascades appropriately.  I cannot force a default font for the tables either as this is for a CMS that we are building to support many different clients.
  8. Answer
    Rumen
    Admin
    Rumen avatar
    14071 posts

    Posted 06 Feb 2013 Link to this post

    Hello,

    I am afraid that this is a browser behavior to apply different font-size to the table elements. The only way to correct it is to define a table, tr class for table elements. This class will be applied only in Design mode of RadEditor.

    You can find more information in these articles:
    Setting Content Area Defaults,
    Content Area Appearance Problems
    and
    Customize Content Area.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top