Completed
Last Updated:
05 May 2015 15:08
by Aarsh
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
FormDecorator
Type:
Bug Report
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:
14 Sep 2021 09:54
by ADMIN
Release Q3 2014
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
FormDecorator
Type:
Bug Report
Issue is reproducible with the following markup:
ASPX:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
<select>
<option>option 1</option>
<option selected="selected"></option>
</select>
For the time being the following JavaScript workaround can be placed below the RadFormDecorators' declaration:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
<script>
Telerik.Web.UI.FormDecorator.LightWeightDomDecorator.prototype.setSelectHeaderText = function (decoratedSelectHeader, text, isDropDown) {
if (isDropDown) {
decoratedSelectHeader.innerHTML = "";
var span = this._createArrowSpan();
decoratedSelectHeader.appendChild(span);
decoratedSelectHeader.appendChild(document.createTextNode(text));
} else {
var innerElement = $telerik.getElementByClassName(decoratedSelectHeader, "rfdSelectText");
if (text) text = text.replace(/</g, "<");
if (innerElement) innerElement.innerHTML = text;
}
}
</script>
Won't Fix
Last Updated:
25 Apr 2016 12:48
by ADMIN
ADMIN
Created by:
Telerik Admin
Comments:
1
Category:
FormDecorator
Type:
Bug Report
Completed
Last Updated:
21 Jun 2022 21:45
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
FormDecorator
Type:
Feature Request
Currently decorated inputs by RadFormDecorator are set with TabIndex="-1", so that they cannot be focused. Expose an additional property in RadFormDecorator through which the decorated button can be focused.
For the time being the focus() can be set to the parentNode of the button. For example:
document.getElementById('Button1').parentNode.focus();
Completed
Last Updated:
16 Feb 2015 12:08
by Ed
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
FormDecorator
Type:
Bug Report
Completed
Last Updated:
28 Jul 2015 08:44
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
0
Category:
FormDecorator
Type:
Bug Report
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:
19 Aug 2015 07:05
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
0
Category:
FormDecorator
Type:
Feature Request
Completed
Last Updated:
08 Jan 2016 14:53
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
0
Category:
FormDecorator
Type:
Bug Report
Workaround - Set the EnableScriptCombine property of RadScriptManager to false or remove RadFormDecorator.
Declined
Last Updated:
01 Dec 2015 09:30
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
FormDecorator
Type:
Bug Report
For the time being the select can be skipped from decoration: <telerik:RadFormDecorator runat="server" ID="rfd" DecoratedControls="All" ControlsToSkip="Select"/> There is also a script attached that provides a workaround for this issue.
Unplanned
Last Updated:
07 Jan 2021 14:31
by ADMIN
Created by:
mmbm
Comments:
0
Category:
FormDecorator
Type:
Feature Request
I noticed that RadFormDecorator does not handle checkboxes in a RadListBox. I had to use an item template. It would be nice if it automatically decorated them. Thanks!
Won't Fix
Last Updated:
12 Apr 2019 16:40
by ADMIN
ADMIN
Created by:
Ianko
Comments:
1
Category:
FormDecorator
Type:
Bug Report
The tooltip is not showing when RadFormDecorator decorate asp:CheckBox and asp:RadioButton. For example:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<asp:CheckBox runat="server" Text="Update" ToolTip="Update Last Name" />
<asp:RadioButton runat="server" Text="Update" ToolTip="Update Last Name" />
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Removing the title attribute from the label element fixes the issue:
<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<script type="text/javascript">
function pageLoad() {
$telerik.$("label[class*='rfdRadio'],label[class*='rfdCheckbox']").removeAttr("title");
}
</script>
<asp:CheckBox runat="server" Text="Update" ToolTip="Update Last Name" />
<asp:RadioButton runat="server" Text="Update" ToolTip="Update Last Name" />
Completed
Last Updated:
21 Apr 2017 14:10
by ADMIN
ADMIN
Created by:
Vessy
Comments:
0
Category:
FormDecorator
Type:
Bug Report
RadFormDecorator does not update properly the state of the grid row checkboxes when Select all checkbox is clicked and the skin is different than Default. video - https://www.screencast.com/t/lwAfXhgEAs The bug is introduced with R1 2017 release. Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/formdecorator/examples/formdecoratorandtelerikcontrols/defaultcs.aspx?skin=Silk 2. Click the "Select All" checkbox of the first Grid Result: The row checkboxes are not checked ISSUE 2: Batch Edit mode checkboxes are not updated. Change a few checkboxes in this demo, they all remain unchecked after you close the cell: http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx Workraounds: - remove the RadFormDecorator - OR, have it skip checkboxes, e.g.: DecoratedControls="All" ControlsToSkip="CheckBoxes"
Completed
Last Updated:
21 Apr 2017 14:10
by Imported User
ADMIN
Created by:
Marin Bratanov
Comments:
1
Category:
FormDecorator
Type:
Feature Request
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
ADMIN
Created by:
Marin Bratanov
Comments:
0
Category:
FormDecorator
Type:
Bug Report
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
ADMIN
Created by:
Rumen
Comments:
0
Category:
FormDecorator
Type:
Bug Report
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
ADMIN
Created by:
Peter Milchev
Comments:
0
Category:
FormDecorator
Type:
Bug Report
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
ADMIN
Created by:
Rumen
Comments:
0
Category:
FormDecorator
Type:
Bug Report
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
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
Created by:
SUNIL
Comments:
1
Category:
FormDecorator
Type:
Bug Report
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
Created by:
SUNIL
Comments:
1
Category:
FormDecorator
Type:
Bug Report
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>