This issue is reproducible on your demo page: https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx
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.
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; }
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>
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();
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; }
In IE11, checkboxes are rendered as a flat style with a black checkmark, as apposed to the 3D look rendered by IE9. When using a RadTreeView with checkboxs and form decorator, the checkboxes are not styled to look like the 3D ones. Checkboxes that are not in trees are styled, and therefore, the checkboxes look differently. It's expecially apparent when both treed and non-tree checkboxes are on the same page. See my support ticket 815961 for my question about this.
FormDecorator changes focus when selection is dragged from one textbox to another in Internet Explorer: http://screencast.com/t/zwtVur2X
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.
When disabled radiobuttons are decorated by RafFormDecorator they are rendered as enabled in Internet Explorer 11. The issue could be worked around by setting "RadioButtons" to the ControlsToSkip attribute of the FormDecorator.
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>
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>
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>
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
Update: The issue is not observed in Lightweight render mode
Currently text color is different in RadButton (color: #00156E) and decorated ASP Button (color: black) with RadFormDecorator for Office2007 skin. For the time being a custom CSS can be used either for the RadButton or for the decorated ASP Button: -Custom Styles for the RadFormDecorator: <style type="text/css"> .RadForm_Office2007.rfdButton a.rfdSkinnedButton, .RadForm_Office2007.rfdButton input.rfdDecorated[type="button"], .RadForm_Office2007.rfdButton input.rfdDecorated[type="reset"], .RadForm_Office2007.rfdButton input.rfdDecorated[type="submit"], .RadForm_Office2007.rfdButton .rfdSkinnedButton button, .RadForm_Office2007 a.rfdSkinnedButton, .RadForm_Office2007 .rfdSkinnedButton button, .RadForm_Office2007 .rfdSkinnedButton input.rfdDecorated, .RadForm_Office2007.rfdButton a.rfdSkinnedButton, .RadForm_Office2007.rfdButton a.rfdSkinnedButton * { color: #00156E !important; } </style> -Custom Styles for the RadButton: <style type="text/css"> .RadButton_Office2007.rbSkinnedButton, .RadButton_Office2007 .rbDecorated, .RadButton_Office2007.rbVerticalButton, .RadButton_Office2007.rbVerticalButton .rbDecorated, .RadButton_Office2007 .rbSplitRight, .RadButton_Office2007 .rbSplitLeft { color: black !important; } </style>
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!