Conflicting Font Size CSS in 2013 Q2 or Q2SP1

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

    Posted 19 Jul 2013 Link to this post

    We just put 2013 Q2 SP1 on our development server.  I'm not sure if this issue starts in Q2 or SP1.

    There is a new piece of CSS in the FormDecorator.css that conflicts with normal operation of a decoration zone.

    .RadForm {
        font-family: "Segoe UI",Arial,Helvetica,sans-serif;
        font-size: 12px;
    }

    I have not seen this in earlier versions. Since the RadForm class is put on the DIV for the region that is being decorated, this CSS interferes with normal font family and size declarations that may already defined outside of this region.

    I'm inclined to think that this is a mistake...?
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 22 Jul 2013 Link to this post

    Hi,

    I have checked the FormDecorator CSS form the latest release and I could not find such a selector. For your convenience attached is FormDecorator.css taken from the distribution fo the latest release.

    The font styles shown on your example, are applied with the following selector, but not with the global RadForm:

    .RadForm.rfdTextbox input[type="text"].rfdDecorated,
    .RadForm.rfdTextbox input[type="password"].rfdDecorated,
    .RadForm.rfdTextarea textarea,
    .RadForm.rfdTextarea textarea[disabled].rfdDecorated:hover,
    .RadForm.rfdTextbox input[disabled][type="text"].rfdDecorated:hover,
    .RadForm.rfdTextbox input[disabled][type="password"].rfdDecorated:hover,
     .RadForm.rfdLabel label,
      .RadForm .rfdDecorated,
      .RadForm .rfdCheckboxChecked,
      .RadForm .rfdInputDisabled.rfdCheckboxChecked:hover,
      .RadForm .rfdCheckboxUnchecked,
      .RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,
      .RadForm .rfdAspLabel,
      .RadForm .rfdRadioUnchecked,
      .RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,
      .RadForm .rfdRadioUnchecked:hover,
      .RadForm .rfdRadioChecked,
      .RadForm .rfdInputDisabled.rfdRadioChecked:hover,
      .RadForm .rfdRadioChecked:hover,
      .RadForm .riTextBox,
      .RadForm .rfdValidationSummaryControl,
      .RadForm .rfdLoginControl,
      .RadForm legend {
        font-size: 12px;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif; }

    Could you check once again to confirm the issue with the latest release (you could also check Demos FromDecorator Page which uses the latest DLL release and also does not apply such styles) and if it still exist send us a sample project with the issue reproduced, so we will be able to test it.

    Regards,
    Bozhidar
    Telerik
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 23 Jul 2013 Link to this post

    Hi,

    You are correct about FormDecorator.css, so I went back and did a little checking.  Our development server has lightweight rendering enabled for testing (we haven't deployed that production).  So this is the file that contains the declaration is actually FormDecoratorLite.css.  It is the very first declaration.

    Joel
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 25 Jul 2013 Link to this post

    Hello,

    LightWeight FormDecorator is a new part of the existing control and it was decided to globally set the font size to the page decorated by the FormDecorator, as usually we have been asked to do that so the page to have consistent font size to both created by the Developer elements and decorated elements.

    As it is a new control it does not conflict with older versions.

    As for your question, I would suggest to have a higher CSS specificity selector to avoid that behavior, or to specify the elements that you don't like to have that font style:

    <head runat="server">
        <title></title>
        <style type="text/css">
            div.RadForm p {
                font-family: Verdana, Arial, serif;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
       <asp:ScriptManager runat="server" ID="scr1">
        </asp:ScriptManager>
            <telerik:RadFormDecorator runat="server" DecoratedControls="All" RenderMode="Lightweight" DecorationZoneID="divid" />
            <div id="divid">
            <label>label text: </label><asp:TextBox runat="server" Text="text"></asp:TextBox>
            <p>Some other text</p>
            </div>
        </form>
    </body>
    </html>

    Another options is to switch back to the Classic render mode.

    We will also consider with our UX Designers is this a correct behavior and how we could provide a solution for people that don't like to have the font styles to be overridden by the FormDecorator.

    Regards,
    Bozhidar
    Telerik
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 25 Jul 2013 Link to this post

    I understand that you may consider it a "new" control, but I would consider it a simply new rendering mode of an existing control.  The descriptions have really talked about the difference in rendering and taking advantage of browser features, but the same essential look and behavior is the same!

    I can also understand that people might request the behavior that you describe, but they can put that in their own CSS because they choose that behavior. (You could provide a class to put on the body or outermost div to make it simple.)  Forcing everyone else to use something that can modify other elements on a page doesn't seem right. And if someone is using relative sizing of other elements, it could affect everything on the page.

     
  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 26 Jul 2013 Link to this post

    Hi,

    And that's why I mentioned that we will consider how to handle the font size. I could not tell if will make any changes in the next official release as our to do list is full, but we will definitely consider it, to include in our future development plans.

    Regards,
    Bozhidar
    Telerik
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  8. Farhana
    Farhana avatar
    10 posts
    Member since:
    Aug 2013

    Posted 04 Nov 2014 in reply to Bozhidar Link to this post

    Hi,

    I am having a similar issue. The Default Font size 12 px is overwriting my font size. How can I avoid that?

    I need to use the following CSS style in my td. All is working Except the Font family and size. 

    td.PrintData_Editor
    {
        font-family: 'Segoe UI';
        font-size: 16pt;
        border-bottom: 1px solid black;
        white-space: normal;
        word-break: normal;
        text-align: left;
        vertical-align: top;
    }  
    can you please help me?

    Thanks, Farhana Tuly












  9. Farhana
    Farhana avatar
    10 posts
    Member since:
    Aug 2013

    Posted 05 Nov 2014 in reply to Farhana Link to this post

    I have tried the following way too to supersede FprmDecorator and its not working :(

    <style type="text/css" style="font-family: 'Segoe UI'">

    div.RadForm PrintData_Finding
    {
    font-family: 'Segoe UI';
    font-size: 16pt;
    border-bottom: 1px solid black;
    white-space: normal;
    word-break: normal;
    text-align: left;
    vertical-align: top;
    }

    </style> 
    ........
    .......
    <div class="PrintData_Finding">
        <table>
    <tr id ="PrintFindings">
    <td class="PrintLabel_Editor" style="float: left; font-size: large; font-weight: bold;" >
    <asp:Label ID="FindingsLabel" Text="Findings:" runat="server" />
    </td>
    </tr>
    <tr>
    <td class= "PrintData_Finding" colspan="4">
    <asp:Label ID="FindingsData" runat="server" />
    </td>
    </tr>
    ...

    </div>
  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 07 Nov 2014 Link to this post

    Hi Farhana,

    The global styling issue with the RadFormDecorator has already been fixed. If you are not using the latest official Telerik UI - 2014.3.1024, does upgrading to it resolve the problem?

    Regards,
    Danail Vasilev
    Telerik
     
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  11. Farhana
    Farhana avatar
    10 posts
    Member since:
    Aug 2013

    Posted 07 Nov 2014 Link to this post

    Hi Danail,
    Thanks for your reply. I have Telerik.UI 2014.1 403. We do have some restrictions with in the company to not get the very latest UI 2014.3.1024 right now due to conflicting prod projects. May be we will upgrade it later on. However I need to fix this issue right now though. And I tried to overwrite the global styling by putting styling in client page and not sure why it is not working! I pasted my code above. Can you help me please how can I overwrite in older version?

    Thanks, Farhana
  12. Farhana
    Farhana avatar
    10 posts
    Member since:
    Aug 2013

    Posted 07 Nov 2014 in reply to Farhana Link to this post

    Hi Danail,
    Just FYI. I finally could fix it locally which overwrites in the older version.
    thanks, Farhana
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017