Declined with the following reason: elements are styled through CSS cascade. In order to handle that you can override explicitly RadFormDecororator's styles. For example: CSS: <style> @media screen and (-webkit-min-device-pixel-ratio:0) { .RadForm.rfdCheckbox input[type="checkbox"].rlbCheck, .RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate, .RadForm.rfdCheckbox input[type="radio"].radPreventDecorate { width: 13px; height: 13px; } .RadForm.rfdCheckbox input[type="checkbox"].rlbCheck, .RadForm.rfdCheckbox input[type="checkbox"].radPreventDecorate { -webkit-appearance: checkbox; } .RadForm.rfdCheckbox input[type="radio"].radPreventDecorate { -webkit-appearance: radio; } } </style> ASPX: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Silk" /> <input type="radio" name="radio-set" id="Radio1" class="radPreventDecorate" /> <input type="checkbox" name="checkbox-set" id="Checkbox1" class="radPreventDecorate" /> <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true"> <Items> <telerik:RadListBoxItem Text="item 1" /> <telerik:RadListBoxItem Text="item 2" /> <telerik:RadListBoxItem Text="item 3" /> </Items> </telerik:RadListBox> </form>
For the time being the following CSS can be used: <style> html.RadForm.rfdRadio.rfdLabel label { display: inline; } </style>
For the time being you can manually add/remove the outline style for the focus state of the checkboxes/radio buttons: CSS: <style> .rfdRealInput:focus { outline: 1px dotted !important; } .outlineClass { outline: 1px dotted !important; } </style> JavaScript: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> function pageLoad() { $('input[type=checkbox],input[type=radio]').each(function () { this.addEventListener('focus', function () { addOutlineClass(this) }); this.addEventListener('blur', function () { removeOutlineClass(this) }); }); } function addOutlineClass(checkbox) { $(checkbox.nextSibling).addClass("outlineClass"); } function removeOutlineClass(checkbox) { $(checkbox.nextSibling).removeClass("outlineClass"); } </script> ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:TextBox ID="Textbox1" runat="server" /> <asp:RadioButtonList ID="Radiobuttonlist1" runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:RadioButtonList> <asp:CheckBoxList ID="Checkboxlist1" runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:CheckBoxList>
For the time being you can use the attached sprite.
For the time being you can capture the keypress event of the submitting button and cancel it only if the Enter key is pressed. For example: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> Sys.Application.add_load(function () { var decoratedButton = Telerik.Web.UI.RadFormDecorator.getDecoratedElement($get("<%=SearchButton.ClientID%>")); cancelKeyPress(decoratedButton); }); function cancelKeyPress() { Array.forEach(arguments, function (element) { $addHandler(element, "keypress", function (event) { if (event.charCode == 13) $telerik.cancelRawEvent(event.rawEvent); }); }); } </script> </telerik:RadCodeBlock> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:Panel ID="SearchPanel" runat="server" DefaultButton="SearchButton"> <telerik:RadTextBox FocusedStyle-CssClass="textfocused" TabIndex="1" HoveredStyle-CssClass="texthover" ID="SearchText" runat="server" Width="200px" Height="22px" /> <asp:Button ID="SearchButton" runat="server" Text="Search" TabIndex="3" OnClick="SearchButton_Click" OnClientClick="alert(1);return true;" /> </asp:Panel>
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.
For the time being you can use the following JavaScript workaround: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> <script> //Workaround: var removeCssClass = Sys.UI.DomElement.removeCssClass; Telerik.Web.UI.RadFormDecorator.prototype.set_elementDisabled = function (element, val) { var actor = element; var nextSibling = element.nextSibling; var type = element.type; if ((type == "checkbox" || type == "radio") && nextSibling && nextSibling.tagName == "LABEL") { actor = nextSibling; } else if (type == "button" || type == "reset" || type == "submit" || element.tagName == "BUTTON") { var parent = element.parentNode; if (parent && parent.tagName == "A") { actor = parent; parent.disabled = val; } } if (val) addCssClass(actor, "rfdInputDisabled"); else removeCssClass(actor, "rfdInputDisabled"); try { if (!val && $telerik.isIE && actor.parentNode.disabled) { actor.parentNode.disabled = val; } } catch (e) { } } </script> <input type="button" value="Test" onclick="Run(); return false;" /> <div id="TestDiv" style="display: none"></div> <script type="text/javascript"> function Run() { $('#TestDiv').dialog({ modal: true, buttons: { "OK": function () { alert('bye'); } } }); } </script> </form> </body> </html>
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.
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>