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();
FormDecorator changes focus when selection is dragged from one textbox to another in Internet Explorer: http://screencast.com/t/zwtVur2X
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>
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.
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>
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>
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:
<style>
.t-ff input[type=checkbox].rfdRealInput,
.t-ff input[type=radio].rfdRealInput {
position: static;
}
</style>
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>