Completed
Last Updated: 21 Apr 2017 14:10 by Imported User
ADMIN
Created by: Marin Bratanov
Comments: 1
Category: FormDecorator
Type: Feature Request
0
At present, the MetroTouch scrollbars in the Lightweight RenderMode are dark (almost black). All metro-based skins must have gray scrollbars.

Scrollbars are usually considered part of the browser and users are used to them as they are by default. Thus, using the default browser scrollbars may be the best course of action:

<telerik:RadFormDecorator runat="server" ID="rfd1" RenderMode="Lightweight" ControlsToSkip="Scrollbars" Skin="MetroTouch" />

Alternatively, use a CSS rule like this to unify the metro-based scrolblars (replace MetroTouch with Metro for the Metro skin):

html.RadForm_MetroTouch.rfdScrollBars {
scrollbar-3dlight-color: #cbcbcb;
scrollbar-arrow-color: #787878;
scrollbar-base-color: #787878;
scrollbar-darkshadow-color: #a7a7a7;
scrollbar-face-color: #d5d5d5;
scrollbar-highlight-color: #e6e6e6;
scrollbar-shadow-color: #d5d5d5;
scrollbar-track-color: #f5f5f5; }

Completed
Last Updated: 25 Dec 2017 11:31 by ADMIN
The issue manifests under IE and Firefox when you change the selected radio button. It stems from any other control with RenderMode=Lightweight that brings the font icons the lightweight mode brings.

Workarounds:
- use the same render mode for all the controls (for example, move the form decorator to RenderMode=Lightweight)
- OR, add the following CSS rule to your page to remove the font icon content from the radio buttons
        .RadForm .rfdRadioUnchecked.p-i-radio:before,
        .RadForm .rfdRadioUnchecked:before,
        .RadForm .rfdRadioChecked.p-i-radiobutton:before,
        .RadForm .rfdRadioChecked:before,
        .RadForm .rfdCheckboxChecked:before,
        .RadForm .rfdCheckboxUnchecked:before {
            content: "";
        }
Completed
Last Updated: 01 Jun 2017 13:32 by ADMIN
RadFormDecorator with RenderMode="Classic" and Silk skin renders the backgrounds of the decorated textboxes/textarea elements in gray. The issue can be seen on http://demos.telerik.com/aspnet-ajax/formdecorator/examples/rendermodes/defaultcs.aspx?skin=Silk.

Workaround: To solve the issue, switch to Lightweight RenderMode or overwrite the gray background with the following CSS class:

    <style>
        .RadForm.RadForm_Silk.rfdTextbox input[type="text"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="password"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="search"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="url"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="tel"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextbox input[type="email"].rfdDecorated, .RadForm.RadForm_Silk.rfdTextarea textarea, .RadForm.RadForm_Silk.rfdTextarea textarea[disabled].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="text"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="password"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="search"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="url"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="tel"].rfdDecorated:hover, .RadForm.RadForm_Silk.rfdTextbox input[disabled][type="email"].rfdDecorated:hover {
            background-color: white !important;
        }
    </style>
Unplanned
Last Updated: 06 Nov 2017 17:21 by ADMIN
Workarounds:
- Use the Lightweight render mode of the FormDecorator;
- Use RadCheckBox instead of asp:CheckBox;
- Use the following styles:
.rfdRadioChecked::before, .rfdRadioUnchecked::before,
.rfdCheckboxChecked::before, .rfdCheckboxUnchecked::before {
    content: none !important;
}
Won't Fix
Last Updated: 19 Apr 2022 13:52 by ADMIN
We are seeing a JavaScript error when we select an Option in a Select control with a ASP Postback on IE11 via keyboard input.
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
 
<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        decorator.DecoratedControls = FormDecoratorDecoratedControls.Select;
    }
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DD Test Page</title>
</head>
 
<body>
 
<form id="DialogForm" runat="server">
    <telerik:RadScriptManager runat="server" />
    <telerik:RadAjaxManager runat="server" />
    <telerik:RadFormDecorator ID="decorator" runat="server" DecorationZoneID="Panel1" EnableEmbeddedSkins="false" RenderMode="Lightweight" />
    <telerik:RadAjaxPanel ID="Panel1" runat="server">
        <asp:DropDownList ID="DD1" runat="server" AutoPostBack="true">
            <asp:ListItem Text="[Select]" Value="" />
            <asp:ListItem Text="T1" Value="1" />
            <asp:ListItem Text="T2" Value="2" />
        </asp:DropDownList>
 
        <asp:Button runat="server" Text="Refresh" />
    </telerik:RadAjaxPanel>
</form>
 
</body>
</html>
 
Reproduce by clicking the DropDown control, and then pressing 'T', and then clicking on a blank section of the page.
Completed
Last Updated: 05 Aug 2020 13:46 by ADMIN
Release R3 2020
Created by: SUNIL
Comments: 2
Category: FormDecorator
Type: Bug Report
0
ISSUE: Screenshot of this issue can be seen at :
(1) https://goo.gl/knpdiq 
(2) and also at https://goo.gl/8tDqKe. 

The issue is that the drop down width is not matching the width of top part when a select element is styled by FormDecorator. I am using the latest version i.e. 2017.3 913.

HOW TO REPRODUCE: 
Go to the demo page of FormDecorator at http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx.
Expand the only select element on this demo page and you will notice that drop down width is not matching the top part width.

RESOLUTION: 
When I tried to resolve this problem, I came up with a solution that works across all skins and render modes as well as all modern browsers of Chrome, Firefox, Opera, Edge + IE 9,10 and 11. 

The solution involves overriding the method Telerik.Web.UI.RadFormDecorator.prototype._expandHeader.  JavaScript for overriding this method is given in attached file. Just copy this script and paste in anywhere in your aspx page to resolve this issue.
Completed
Last Updated: 30 Apr 2020 13:29 by ADMIN
Release R2 2020
ISSUE:  Screenshot of this issue can be seen at https://goo.gl/F8C73V. 

This issue occurs in classic render mode when an option has long text that gets truncated instead of being wrapped.

HOW TO REPRODUCE:
Use the following page code to reproduce it. Expand the drop down and notice that the option just after None is truncated and not wrapped.

<%@ Page Language="C#" AutoEventWireup="true"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" RenderMode="Classic" Skin="MetroTouch">
            <TargetControls>
                <telerik:TargetControl ControlID="RadFormDecorator1" />
            </TargetControls>
        </telerik:RadSkinManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Classic" ControlsToSkip="None" />
        <select id="dd1" style="width: 200px;">
            <option value="none">None</option>
            <option value="volvo">Volvo sdsd sdsd ddsds  sddsd dsdsd sdds sdsd sdsdsd sdsd sds ddsd xyz</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>

        <button id="btn1">Postback</button>
      
    </form>
</body>
</html>


RESOLUTION:
Put the following style in head part of your aspx page. This will fix this issue.

    <style>
        div.rfdSelectBox ul li {
            height: unset;
            height: none;/*for ie and edge*/
            height: auto;
        }
    </style>
Completed
Last Updated: 04 Aug 2020 13:11 by ADMIN
Release R3 2020
ISSUE: 

Screenshot of this issue can be seen at https://goo.gl/c9WriW
Also, a video of this can be seen at https://goo.gl/d4nnKq

This issue occurs in Lightweight or Mobile render mode. In classic render mode, this issue does not exist.

HOW TO REPRODUCE:

Use the following page markup to reproduce this problem.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" RenderMode="Lightweight" Skin="MetroTouch">
            <TargetControls>
                <telerik:TargetControl ControlID="RadFormDecorator1" />
            </TargetControls>
        </telerik:RadSkinManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" ControlsToSkip="None" />
        <select id="ddl2" runat="server" style="width: 175px;">
            <option value=""></option>
            <option value="dallas">Dallas</option>
            <option value="chicago">Chicago</option>
            <option value="toronto">Toronto</option>
            <option value="austin">Austin</option>
        </select>

        <button id="btn1">Postback</button>

    </form>
</body>
</html>

RESOLUTION:
Add the following style in your aspx head part based on the skin you are using for FormDecorator.

If skin is any one these big skins -  MetroTouch or BlackMetroTouch or Material or Silk or Glow or Bootstrap, then use the style below.
    <style>
        div.rfdSelectBox ul li {
            min-height: 16px;
        }

        .rfdSelect {
            min-height: 32px !important;
        }
    </style>

For all other skins, use the style element as below.

    <style>
        div.rfdSelectBox ul li {
            min-height: 16px;
        }

        .rfdSelect {
            min-height: 32px;
        }
    </style>
</head>
Completed
Last Updated: 12 Dec 2018 10:34 by ADMIN
Steps to reproduce:
1. Load https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx on IE 11
2. Input two lines in the textarea
3.  Select the second line from right to left by holding the left mouse button and releasing it when the cursor is outside of the text area


4. Press button 'delete' from keyboard with multi select content 
=> result: Can not delete content


5. Press button 'backspace' from keyboard 
=> result: back from url....


The problem happens only in IE when there is a select element on the page and when the mouse goes outside the boundaries of the textarea.

Temporary fix:
       <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator>
        <script>
            Telerik.Web.UI.RadFormDecorator.prototype._selectBodyClickHandler = function (e) {


                var target = e.target;


                //in chrome the A element is not focused by default
                if (!Telerik.Web.Browser.ie &&target && target.focus && target !== document.activeElement) {
                    try {
                        target.focus();
                    } catch (ex) { }
                }


                if ($telerik.isTouchDevice) {
                    while (target.nodeType != 1 && target.nodeType != 9)
                        target = target.parentNode;
                }


                //See if an optGroup label
                if (this._isSelectOptgroup(target)) {
                    //Do nothing
                    return;
                }


                //Check if clicked on a box
                var box = this._getDecoratedSelectBoxParent(target);


                if (box) {
                    if (this._isSelectElementDisabled(box) || box === target) return;
                    else this._optionClickHandler(e);
                    if (box.setActive && box.style.visibility != "hidden") box.setActive();
                    return;
                }


                //Check if clicked on a select header
                var header = this._getDecoratedSelectHeaderParent(target);
                if (header) {
                    if (this._isSelectElementDisabled(header)) return;
                    else this._expandHeader(header);


                    if (header.setActive) header.setActive();
                    if (header.focus) header.focus();
                    return;
                }


                //else - just hide the popup
                this._hideSelectPopup();
            }
        </script>
Completed
Last Updated: 06 Sep 2023 15:29 by ADMIN
Release R3 2023

This issue is reproducible on your demo page: https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx

  • Navigate to the sample drop down list control.
  • Open the list.
  • Select an item either by typing the first letter of an item or using the arrow keys.
  • Press the <Enter> or <Tab> key.

The expected behavior is the drop down list will close. It does not. However, if you collapse the list with the mouse or <Alt>+<Up Arrow> and then open the list again, the <Enter> and <Tab> keys will behave as expected.

As this problem is also present on your demo site, it is likely a bug with the RFD product and not our specific use case. If there is an update to the product or a JavaScript workaround, that would be greatly appreciated.

Completed
Last Updated: 10 Sep 2016 07:27 by ADMIN
JavaScript error is thrown on the page, when a classic DropDownList is clicked in application running with .NET 3.5, debug mode.

Error message:

"Uncaught Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch."

Steps to reproduce:
1. Run this code with .NET 3.5 and <compilation debug="true">
        <asp:ScriptManager ID="sm" runat="server" ScriptMode="Debug">
        </asp:ScriptManager>
        <telerik:RadFormDecorator runat="server" EnableRoundedCorners="true" DecoratedControls="All" />
        <asp:DropDownList runat="server">
            <asp:ListItem Text="text1" />
            <asp:ListItem Text="text2" />
        </asp:DropDownList>

2. Click the drop-down button.

Result: A JS error is thrown.

This happens because under .NET 3.5, in the .debug.js version of the MS AJAX scripts, the Function$emptyMethod() method RadFormDecorator uses has parameter validation and throws errors when you pass any arguments. This is not present in release and seems to not be present in newer versions of .NET
Declined
Last Updated: 20 Jun 2022 15:02 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
For the time being you can manually increase the width of the decorated select:
ASPX:
		<script>
			function pageLoad() {
				increaseWidth($telerik.$('.rfdSelect'), 68);
			}
			function increaseWidth(element, increase) {
				element.css('width', parseInt(element.css('width').replace('px', '')) + increase + 'px');
			}
		</script>
<telerik:RadFormDecorator ID="decor" runat="server" DecoratedControls="All" Skin="BlackMetroTouch"  />
<asp:DropDownList ID="ddlASPNET" runat="server"></asp:DropDownList>
C#:
		protected void Page_Load(object sender, EventArgs e)
		{
			var dt = Getdata();

			ddlASPNET.DataSource = dt;
			ddlASPNET.DataTextField = "Name";
			ddlASPNET.DataValueField = "ID";
			ddlASPNET.DataBind();
		}

		private DataTable Getdata()
		{
			DataTable dt = new DataTable();
			dt.Columns.Add("ID");
			dt.Columns.Add("Name");

			for (int i = 1; i <= 100; i++)
			{
				DataRow dr = dt.NewRow();
				dr["ID"] = i.ToString();
				if (i % 2 > 0)
					dr["Name"] = string.Format("Test Name # {0}", i);
				else
					dr["Name"] = string.Format("aaaaaaaaaaaaaa bbbbbbbbbbbbbTest Name Unmodule # {0}", i);

				dt.Rows.Add(dr);
			}
			return dt;

		}
Completed
Last Updated: 08 Jun 2022 08:25 by ADMIN
Completed
Last Updated: 16 Jul 2018 11:25 by ADMIN
A workaround is to add a CSS rule that provides a contrasting background color for the decorated checkbox. For example:

		.RadForm_Bootstrap .RadGrid .rfdToggleImage
		{
			background-color: white;
		}

This applies to Q3 2015 with RenderMode=Lightweight for the RadFormDecorator control. Older versions should be upgraded to the latest.
Completed
Last Updated: 06 Oct 2015 14:56 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
Issue is reproducible with the code below:

1) Run the code below.

2) Click on "Postback" button or select an item from the dropdown.

3) A sever-side error is thrown - "Collection was modified; enumeration operation may not execute."

ASPX:

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Postback" />

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"></telerik:RadFormDecorator>

        <telerik:RadDropDownList ID="cbListeLigue" DataSourceID="DetailsViewDataSource" DefaultMessage="Choisir une ligue" runat="server" AutoPostBack="True" DataTextField="CustomerID" DataValueField="CustomerID" Text="Ligue"></telerik:RadDropDownList>

        <asp:SqlDataSource runat="server" ID="DetailsViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
            OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />

        <asp:SqlDataSource runat="server" ID="FormViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
            OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
            <SelectParameters>
                <asp:ControlParameter ControlID="cbListeLigue" Name="CustomerID" PropertyName="SelectedValue"
                    Type="String"></asp:ControlParameter>
            </SelectParameters>
        </asp:SqlDataSource>

        <telerik:RadGrid ID="rGrid_ListeSaison" runat="server"
            DataSourceID="FormViewDataSource" AllowFilteringByColumn="True">
            <MasterTableView DataKeyNames="CustomerID" AutoGenerateColumns="false"
                DataSourceID="FormViewDataSource">
                <Columns>
                    <telerik:GridDateTimeColumn DataField="OrderDate" UniqueName="OrderDate">
                    </telerik:GridDateTimeColumn>
                    <%--<telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID"></telerik:GridBoundColumn>--%>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </form>

You can choose one of the following workarounds:

1) Set the ControlsToSkip="GridFormDetailsViews,LoginControls,ValidationSummary"  property of the decorator.

2) Set the AllowFilteringByColumn property of the grid to false.

3) Remove the GridDateTimeColumn column of the grid.
Completed
Last Updated: 27 Aug 2015 07:57 by ADMIN
Workaround - set the ControlsToSkip="Select" property of the decorator:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Select" />
		<asp:DropDownList ID="Dropdownlist1" runat="server">
			<asp:ListItem Text="text1" />
			<asp:ListItem Text="text2" />
		</asp:DropDownList>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 27 Aug 2015 06:17 by ADMIN
Workaround - avoid scrollbar decoration:

<telerik:RadFormDecorator runat="server" ID="rfd1" DecoratedControls="All" Skin="Default" ControlsToSkip="Scrollbars" />

Reproduction Steps:

1) Open the code below in Chrome with Telerik UI 2015.2.729 version.

2) Scroll till you reach the second blue div with the button.

3) Click the button to make an AJAX request.

4) Actual - the page is scrolled to the end of the first inner div. Expected - the page should not be scrolled.

       <telerik:RadFormDecorator runat="server" ID="rfd1" DecoratedControls="All" Skin="Default" />
        <div style="width: 600px; height: 500px; border: 3px solid green; overflow: scroll;">
            <div style="height: 1000px; border: 3px solid red;"></div>
            <asp:UpdatePanel ID="Updatepanel1" runat="server">
                <ContentTemplate>
                    <div style="height: 300px; border: 3px solid blue;">
                        <telerik:RadButton ID="RadButton1" runat="server" Text="Click" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
Completed
Last Updated: 14 Sep 2021 12:32 by ADMIN
Release Q1 2015
For the time being you can use the following CSS:
    <style>
        a.rfdSelect.rfdSelect_Default {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
ASPX:
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
        <asp:DropDownList ID="Dropdownlist1" runat="server">
            <asp:ListItem Value="" Text="(Not Completed)">
            </asp:ListItem>
            <asp:ListItem Value="2" Text="Equipment Note ttttttttttt tttttttttt tt tt" Selected="true">
            </asp:ListItem>
            <asp:ListItem Value="3" Text="Test">
            </asp:ListItem>
            <asp:ListItem Value="4" Text="Hello">
            </asp:ListItem>
        </asp:DropDownList>
Declined
Last Updated: 21 Jul 2014 10:26 by ADMIN
Declined with the following reason: elements are styled through CSS cascade. In order to handle that you can override explicitly RadFormDecororator's styles. For example:
CSS:
	<style>
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			.RadForm.rfdCheckbox input[type="checkbox"].rlbCheck,
			.RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate,
			.RadForm.rfdCheckbox input[type="radio"].radPreventDecorate {
				width: 13px;
				height: 13px;
			}

			.RadForm.rfdCheckbox input[type="checkbox"].rlbCheck,
			.RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate {
				-webkit-appearance: checkbox;
			}

			.RadForm.rfdCheckbox input[type="radio"].radPreventDecorate {
				-webkit-appearance: radio;
			}
		}
	</style>
ASPX:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Silk" />
		<input type="radio" name="radio-set" id="Radio1" class="radPreventDecorate" />
		<input type="checkbox" name="checkbox-set" id="Checkbox1" class="radPreventDecorate" />
		<telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true">
			<Items>
				<telerik:RadListBoxItem Text="item 1" />
				<telerik:RadListBoxItem Text="item 2" />
				<telerik:RadListBoxItem Text="item 3" />
			</Items>
		</telerik:RadListBox>
	</form>