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
For the time being the following CSS workaround can be used: <style> .rfdSelect.rfdSelect_Default { min-height: 1.417em; } </style>
When a page has FormDecorator with configured DecoratedControls="All" and a <select> element present on the page, clicking over an SVG causes a JS error.The issue is reproducible in Firefox. video: http://screencast.com/t/FfrGSxCV
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>
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.
Hello. Would you please concider adding styling of anchor elements to the formdecorator? It would make it easier styling existing pages.
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>
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>
Typing a letter key must move the focus to the next instance of a visible node whose title begins with that printable letter.
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" />
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>
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();
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.
When decorated button is disabled on the client, its appearance is not changed under IE10. The issue is related only to the visual appearance and not to the functionality of the decorated button.
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>