Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Completed

Last Updated: 06 Sep 2023 15:29 by ADMIN

Release R3 2023

Fix pressing tab or enter key does not close the RadFormDecorator dropdownlist popup

Created by: Jeremy

Comments: 3

Category: FormDecorator

Type: Bug Report

Fix pressing tab or enter key does not close the RadFormDecorator dropdownlist popup

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: 22 Jun 2022 11:11 by ADMIN

ADMIN

Incorrect text alignment for select elements when parent node has text-align: right

Created by: Marin Bratanov

Comments: 0

Category: FormDecorator

Type: Bug Report

Incorrect text alignment for select elements when parent node has text-align: right

Actual: text squished to the right, overlaps the dropdown arrow

Expected: text looks normal, just the select is positioned to the right

Workaround:
            .rfdSelect,
            .rfdSelectBoxDropDown
            {
                text-align: left;
            }

            .rfdRtl .rfdSelect
            {
                text-align: right;
            }

Completed

Last Updated: 22 Jun 2022 10:34 by ADMIN

ADMIN

Longer text of decorated radio buttons and checkboxes by LWR RadFormDecorator is not properly wrapped

Created by: Danail Vasilev

Comments: 0

Category: FormDecorator

Type: Bug Report

Longer text of decorated radio buttons and checkboxes by LWR RadFormDecorator is not properly wrapped

For the time being the following workaround can be used:
CSS:
	<style type="text/css">
		@media screen and (-webkit-min-device-pixel-ratio: 0) {
			.RadForm.rfdRadio input[type="radio"] + label,
			.RadForm.rfdCheckbox input[type="checkbox"] + label {
				display: inline !important;
				vertical-align: bottom !important;
			}
		}


		.RadForm.rfdCheckbox .rfdCheckboxChecked + label, 
		.RadForm.rfdCheckbox .rfdCheckboxUnchecked + label,
		.RadForm.rfdRadio .rfdRadioChecked + label, 
		.RadForm.rfdRadio .rfdRadioUnchecked + label {
			display: inline !important;
		}
	</style>
ASPX:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" />
		<input id="myRadio" type="radio" name="name" value="val1" />
		<label for="myRadio">some long text some long text some long text some long text some long text some long text</label>
		<br />
		<input id="myCheckBox" type="checkbox" name="name" value="val2" />
		<label for="myCheckBox">some long text some long text some long text some long text some long text some long text</label>
	</form>

Completed

Last Updated: 21 Jun 2022 09:27 by ADMIN

ADMIN

Text color of decorated H4, H5 and H6 elements in Lightweight should be consistent with Classic mode for all of the skins

Created by: Danail Vasilev

Comments: 1

Category: FormDecorator

Type: Bug Report

Text color of decorated H4, H5 and H6 elements in Lightweight should be consistent with Classic mode for all of the skins

Declined

Last Updated: 20 Jun 2022 15:02 by ADMIN

ADMIN

Fix width of decorated selects

Created by: Danail Vasilev

Comments: 0

Category: FormDecorator

Type: Bug Report

Fix width of decorated selects

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

ADMIN

Decorated ASP:DropDown is collapsed when the scrollbar is clicked under IE 11 on Win8.1

Created by: Danail Vasilev

Comments: 1

Category: FormDecorator

Type: Bug Report

Decorated ASP:DropDown is collapsed when the scrollbar is clicked under IE 11 on Win8.1

Completed

Last Updated: 08 Jun 2022 07:25 by ADMIN

ADMIN

FormDecorator changes focus when selection is dragged from one textbox to another in Internet Explorer/Edge

Created by: Orlin

Comments: 1

Category: FormDecorator

Type: Bug Report

FormDecorator changes focus when selection is dragged from one textbox to another in Internet Explorer/Edge

FormDecorator changes focus when selection is dragged from one textbox to another in Internet Explorer: http://screencast.com/t/zwtVur2X

Won't Fix

Last Updated: 19 Apr 2022 13:52 by ADMIN

ADMIN

Unable to get property 'dispatchEvent' of undefined or null reference error in IE11

Created by: Rumen

Comments: 0

Category: FormDecorator

Type: Bug Report

Unable to get property 'dispatchEvent' of undefined or null reference error in IE11

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: 22 Feb 2022 14:47 by ADMIN

ADMIN

Decorated disabled button should not exhibit hover effect

Created by: Danail Vasilev

Comments: 0

Category: FormDecorator

Type: Bug Report

Decorated disabled button should not exhibit hover effect

For the time being you can use the following CSS workaround:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style>
		.RadForm.rfdButton input[disabled="disabled"].rfdDecorated {
			background-position: left -22px !important;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
		<asp:Button ID="Button1" Text="text" runat="server" Enabled="false" />
	</form>
</body>
</html>

Completed

Last Updated: 14 Sep 2021 12:32 by ADMIN

Release Q1 2015

ADMIN

FIX longer text is wrapped in decorated select by RadFormDecorator in lightweight render mode

Created by: Danail Vasilev

Comments: 0

Category: FormDecorator

Type: Bug Report

FIX longer text is wrapped in decorated select by RadFormDecorator in lightweight render mode

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>

Completed

Last Updated: 14 Sep 2021 09:54 by ADMIN

Release Q3 2014

ADMIN

FIX empty options from decorated selects by RadFormDecorator in Lightweight mode do not have arrow

Created by: Danail Vasilev

Comments: 1

Category: FormDecorator

Type: Bug Report

FIX empty options from decorated selects by RadFormDecorator in Lightweight mode do not have arrow

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, "&lt;");
                    if (innerElement) innerElement.innerHTML = text;
                }
            }
        </script>

Completed

Last Updated: 13 Aug 2021 11:38 by ADMIN

Release Q2 2014

ADMIN

FIX : Incorrect width of RadTextBox when styled by RadFormDecorator

Created by: Angel Petrov

Comments: 0

Category: FormDecorator

Type: Bug Report

FIX : Incorrect width of RadTextBox when styled by RadFormDecorator

Completed

Last Updated: 13 Aug 2021 08:48 by ADMIN

Release Q2 2015

ADMIN

FIX the appearance of disabled inputs in IE11 when decorated by RadFormDecorator

Created by: Danail Vasilev

Comments: 2

Category: FormDecorator

Type: Bug Report

FIX the appearance of disabled inputs in IE11 when decorated by RadFormDecorator

The appearance of disabled inputs in the markup is not updated in IE11. For the time being you can manually set the corresponding disabled CssClasses, using the approach from this help article:

http://www.telerik.com/help/aspnet-ajax/formdecorator-troubleshooting-input-appearance-is-not-updated-when-disabled-in-internet-explorer.html

Completed

Last Updated: 05 Aug 2020 13:46 by ADMIN

Release R3 2020

Select element drop down width issue in FormDecorator

Created by: SUNIL

Comments: 2

Category: FormDecorator

Type: Bug Report

Select element drop down width issue in FormDecorator

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: 04 Aug 2020 13:11 by ADMIN

Release R3 2020

option with empty text is causing height of option and select to become too small

Created by: SUNIL

Comments: 1

Category: FormDecorator

Type: Bug Report

option with empty text is causing height of option and select to become too small

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: 30 Apr 2020 13:29 by ADMIN

Release R2 2020

Option text is not wrapped in classic render mode for a select styled by FormDecorator

Created by: SUNIL

Comments: 1

Category: FormDecorator

Type: Bug Report

Option text is not wrapped in classic render mode for a select styled by FormDecorator

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: 31 Oct 2019 11:47 by ADMIN

Release R3 2019 SP1

Missing checkboxes and radio buttons in Firefox 65+

Created by: Telerik Admin

Comments: 2

Category: FormDecorator

Type: Bug Report

Missing checkboxes and radio buttons in Firefox 65+

FireFox 65 again changed its behavior and breaks the behavior of our 2019 R1 SP1 release., introducing a fix for the following bug:

https://feedback.telerik.com/aspnet-ajax/1377646-duplicated-checkboxes-in-firefox-63

If you are using the controls from 2019 R1 SP1 or later, you can use the following workaround in order to make the input elements visible until we include the fix internally:

Completed

Last Updated: 07 Jun 2019 07:52 by ADMIN

ADMIN

Duplicated Checkboxes in Firefox 63

Created by: Vessy

Comments: 20

Category: FormDecorator

Type: Bug Report

Duplicated Checkboxes in Firefox 63

The checkboxes decorated with RadFormDecorator appeared double in Classic rendering after upgrading to Firefox 63.

Steps to reproduce:
1. Upgrade to Firefox 63
2. Run the following setup
        <telerik:RadFormDecorator runat="server" DecoratedControls="CheckBoxes" RenderMode="Classic" />
        <div>asp:Checkbox</div>
        <asp:CheckBox ID="chkApproved" runat="server" Text="asp:Checkbox" />

        <div>Html Input</div>
        <input id="chkApproved1" type="checkbox" name="chkApproved" />

======================================

Solutions found so far:
1) Use RadFormDecorator in Lightweight RenderMode:
     <telerik:RadFormDecorator runat="server" RenderMode="Lightweight"/>

2) Set the RadFormDecorator's DecoratedControls="All":
     <telerik:RadFormDecorator runat="server" RenderMode="Classic" DecoratedControls="All"  />

3) Set the ControlsToSkip="CheckBoxes"
      <telerik:RadFormDecorator runat="server" RenderMode="Classic" ControlsToSkip="CheckBoxes"  />

4) Or add the following CSS overwrite to the page:
        <style>
           .rfdCheckboxUnchecked, .rfdCheckboxChecked {
               padding: 0 !important;
               background-image: none !important;
           }
       </style>

Won't Fix

Last Updated: 12 Apr 2019 16:40 by ADMIN

ADMIN

Tooltip not showing with asp:CheckBox and asp:RadioButton

Created by: Ianko

Comments: 1

Category: FormDecorator

Type: Bug Report

Tooltip not showing with asp:CheckBox and asp:RadioButton

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: 12 Apr 2019 16:34 by ADMIN

radformdecorator on checkbox issue in chrome

Created by: YOUNGKON

Comments: 3

Category: FormDecorator

Type: Bug Report

radformdecorator on checkbox issue in chrome

After upgrading to new version of Telerik (2016.3.914.35), duplicate checkboxes are displaying. Please refer attached file.