Completed
Last Updated: 28 Jul 2015 08:44 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
1
The issue is reproducible when you add a CSS class, responsible for styling the scrollbars, too lately and can also be reproduced on a page that contains no Telerik UI for ASP.NET AJAX controls:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar,
        .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:vertical,
        .RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:horizontal {
            background-color: red !important; /* choose your color */
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            setTimeout(function () {
                Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars");
            }, 10);
        </script>
        <div id="testDiv" style="overflow: scroll; height: 200px; width: 300px">
            <table>
                <tr style="height: 500px;">
                    <td></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

If you remove the timeout, however, the issue will be gone:

        <script>
        //    setTimeout(function () {
                Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars");
         //   }, 10);
        </script>

Possible workarounds for scenarios when the RadFormDecorator control is involved:

    1) Remove the scorllbars styling by setting the ControlsToSkip property to "Scrollbars".

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

     2) Use the following JavaScript workaround:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Glow"></telerik:RadSkinManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Scrollbars" />
		<script>
			//JavaScript workaround:
			Telerik.Web.UI.RadFormDecorator.removeGlobalClassesToRootElement = function (rootElement) {
				rootElement.className = rootElement.className.replace(/rfdRtl|RadForm_\w+|rfdButton|rfdZone|rfdLabel|rfdHeading|rfdTextbox|rfdTextarea|rfdFieldset|rfdRadio|rfdCheckbox|rfdGrids/g, "").trim();
			};
			Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_<%=RadSkinManager.GetCurrent(this.Page).Skin%> rfdScrollBars");
		</script>
		<div id="testDiv" style="overflow: scroll; height: 200px; width: 300px">
			<table>
				<tr style="height: 500px;">
					<td></td>
				</tr>
			</table>
		</div>
	</form>
Completed
Last Updated: 25 May 2015 14:44 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: FormDecorator
Type: Bug Report
1

			
Completed
Last Updated: 07 May 2015 15:10 by Elena
Completed
Last Updated: 05 May 2015 15:08 by Aarsh
For the time being the following CSS can be used:

    <style>
        .rfdSelectBox.rfdSelectBox_Default.rfdSelectBoxDropDown {
            z-index: 4007;
        }
    </style>

Where 'Default' is the name of the skin.
Completed
Last Updated: 05 May 2015 13:28 by Elena
The disabled inputs should be darker so it is visually clear that you cannot enter text in them. This does not happen with some skins (e.g. Windows7) with the lightweight rendermode.
Completed
Last Updated: 05 May 2015 09:58 by Lander
Completed
Last Updated: 23 Apr 2015 10:58 by ADMIN
Tabbing to decorated select element by RadFormDecorator, focuses the original select element. For the time being the following workaround can be used:

JavaScript:

        <script>
            function pageLoad() {
                $ = $telerik.$;
                $.each($(".rfdRealInput"), function (index, value) { value.setAttribute("tabindex", "-1") });
            }
        </script>

ASPX:
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
        <asp:TextBox ID="Textbox1" runat="server" />
        <asp:DropDownList ID="Dropdownlist1" runat="server">
            <asp:ListItem Text="text1" />
            <asp:ListItem Text="text2" />
        </asp:DropDownList>
        <asp:TextBox ID="Textbox2" runat="server" />
        <telerik:RadButton ID="RadButton1" runat="server" />


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>
Completed
Last Updated: 21 Jul 2014 08:11 by ADMIN
In Q3 2013 Firefox and Chrome freeze when a container with a select element is made visible with JavaScript and RadFormDecorator is present on the page.

The issue will be fixed for the upcoming Q3 2013 SP1. For the time being possible workarounds are:

    - Setting the ControlsToSkip property of the RadFormDecorator to "Select".
    - OR placing the provided JavaScript code from the attached archive below the declaration of the RadFormDecorator.

Sample scenarios that reproduce the issue are:

    - Expanding an inner item from a RadPanelBar. The RadPanelBar has multiple Items that contain select elements and a RadFormDecorator is present on the page.
    - JavaScript is used to set the display property of a container with a select element to "block" for example, multiple containers with select elements are present on the page and RadFormDecorator is used. For example:
JavaScript:

<script type="text/javascript">
    function pageLoad() {
        $get("div1").style.display = "block";
    }
</script>

ASPX:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<div id="div1" style="display: none;">
    <select>
        <option>text1</option>
        <option>text2</option>
        <option>text3</option>
    </select>
</div>
<div id="div2" style="display: none;">
    <select>
        <option>text1</option>
        <option>text2</option>
        <option>text3</option>
    </select>
</div>
Completed
Last Updated: 03 Jun 2014 07:30 by ADMIN
Completed
Last Updated: 12 Mar 2014 15:18 by ADMIN
For the time being the following CSS workaround can be used:

    <style>
        .rfdSelect.rfdSelect_Default {
            min-height: 1.417em;
        }
    </style>
Completed
Last Updated: 26 Feb 2014 12:17 by ADMIN
Typing a letter key must move the focus to the next instance of a visible node whose title begins with that printable letter.
Completed
Last Updated: 18 Feb 2014 13:00 by ADMIN
For the time being you can either skip the selects elements from decoration:

ASPX:

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Select" />
        <div id="div1">
            <telerik:ReportViewer ID="ReportViewer1" runat="server" Height="492px" Width="927px"></telerik:ReportViewer>
        </div>


Or decorate only particular zone that do not include the ReportViewer:

ASPX:
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="div2" />
        <div id="div1">
            <telerik:ReportViewer ID="ReportViewer1" runat="server" Height="492px" Width="927px"></telerik:ReportViewer>
        </div>
        <div id="div2">
            <input type="text" name="name" value=" " />
            <select>
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select>
        </div>
Completed
Last Updated: 03 Feb 2014 12:53 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
1
Buttons decorated by RadFormDecorator have 16 additional pixels. Issue is reproducible since Q3 2013 and is caused due to the box-sizing and -moz-box-sizing styles. For the time being one of the following workarounds can be used:

1) Override the box-sizing style:

CSS:

    <style>
        .RadForm, .RadForm.rfdTextbox .rfdDecorated {
            box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
        }
    </style>

ASPX:

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <div style="margin: 20px; margin-bottom: 0; border: 2px solid Black; height: 15px; width: 168px;"></div>
        <div style="position: absolute; margin: 10px; margin-top: 0; padding: 10px; padding-top: 0;">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Cancel" TabIndex="1" Width="80px" UseSubmitBehavior="false" />
                <asp:Button ID="Button2" runat="server" Text="Save" TabIndex="2" Width="80px" UseSubmitBehavior="false" />
            </div>
        </div>
2) Set the rendermode of the FormDecorator to lightweight:

ASPX:

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
        <div style="margin: 20px; margin-bottom: 0; border: 2px solid Black; height: 15px; width: 168px;"></div>
        <div style="position: absolute; margin: 10px; margin-top: 0; padding: 10px; padding-top: 0;">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Cancel" TabIndex="1" Width="80px" UseSubmitBehavior="false" />
                <asp:Button ID="Button2" runat="server" Text="Save" TabIndex="2" Width="80px" UseSubmitBehavior="false" />
            </div>
        </div>
Declined
Last Updated: 01 Nov 2013 13:06 by ADMIN
Improve the appearance of decorated Select and ASP DropDownList by RadFormDecorator in RenderMode="Classic", so that their look resembles RadDropDownList.

For the time being RenderMode="Lightweight" can be used.

Rejected with comment:
Future appearance improvements for RadFormDecorator in Classic mode will not be availalble anymore. The expection will be issues related to functionality or critical appearance issues.
Declined
Last Updated: 01 Nov 2013 13:06 by ADMIN
Rejected with the following comment:

When trying to enable/disable an input element that is decorated with RadFormDecorator, the disabled attribute must be set to the DOM input element and not to the JavaScript input object, in order for the RadFormDecorator to take effect. For example:
ASPX:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="disableCheckBox" Text="click" />
<input type="checkbox" id="checkbox" name="name" value="sdf" checked="checked" />
JavaScript:
function disableCheckBox() {
    var checkbox1 = $telerik.$('#checkbox');
    //Either
    //checkbox1.prop('disabled', 'disabled');
    //OR
    checkbox1[0].disabled = true;
}
In IE there is an issue with the disabled property of the DOM elements, when it comes to tracking it. This issue is reproduced only when the element is enabled and should become disabled. The other way around the tracking is working, i.e. if the select is disabled it can be enabled and IE will raise an event about it. This is a browser issue and there is nothing that can be done on our side to work around it.
Completed
Last Updated: 04 Sep 2013 14:51 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: FormDecorator
Type: Bug Report
0
A possible workaround is to avoid the decoration of button controls by setting RadFormDecorator's ControlsToSkip property to "Buttons". 
1 2 3 4