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

Conflicting Font Size CSS in 2013 Q2 or Q2SP1

10 Answers 86 Views

FormDecorator

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

10 Answers, 1 is accepted

answered on 22 Jul 2013, 12:44 PM

FormDecorator.css

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.

answered on 25 Jul 2013, 12:01 PM

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

answered on 25 Jul 2013, 02:16 PM

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.

answered on 05 Nov 2014, 04:52 PM

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>