Currently the default height of RadButton with Silk skin and CssClass="rbPrimaryButton" is 28px. The correct height must be auto, so that the text inside the RadButton can be wrapped when it is longer and no height is specified. For the time being the following CSS workaround can be used: CSS: span.RadButton.RadButton_Silk.rbLinkButton.rbPrimaryButton { height: auto; } ASPX: <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" ButtonType="SkinnedButton" Text="aaaaaaaaaaa bbbbbbbbbbbbbb cccccccccccc" Width="200px" CssClass="rbPrimaryButton" /> <telerik:RadButton ID="RadButton3" runat="server" Skin="Silk" ButtonType="SkinnedButton" Text="aaaaaaaaaaa bbbbbbbbbbbbbb cccccccccccc" Width="200px" CssClass="rbSecondaryButton" />
When the PrimaryIconUrl and PrimaryHoveredIconUrl properties of the RadButton are set and a dialog is opened when OnClientClicked event is triggered, the button's icon from the hovered image persists. This behavior is observed only in FireFox.
RadButton with button type checkbox or radio has incorenct margin in Silk and Glow. Due to the negative value of the margin, the checkbox/radio button icons are partially hidden. The following CSS fixes the issue (for Silk skin): .rbCheckBox.RadButton_Silk .rbToggleCheckbox.rbIcon, .rbCheckBox.RadButton_Silk .rbToggleCheckboxChecked.rbIcon, .rbCheckBox.RadButton_Silk .rbToggleCheckboxFilled.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckbox.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckboxChecked.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckboxFilled.rbIcon, .rbRadioButton.RadButton_Silk .rbToggleRadio.rbIcon, .rbRadioButton.RadButton_Silk .rbToggleRadioChecked.rbIcon { margin: 0 !important ;
For the time being you can use the following JavaScript workaround: <telerik:RadButton ID="radbtnVehicleList" runat="server" Text="Google" Skin="Default" Width="200px" NavigateUrl="http://www.telerik.com" ButtonType="LinkButton" AutoPostBack="false" Target="_blank"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype = { clicked: function (ev) { var that = this; that.base.clicked(ev); that._handleNavigateUrl(); }, _handleNavigateUrl: function () { var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (!url) return; if (target && target == "_blank") window.open(url); else if (target && target == "_parent") window.parent.location.href = url; else if (target && target == "_top") window.top.location.href = url; else if (!target || target == "_self") window.location.href = url; else { var targetFrame = $("iframe[name='" + target + "']").get(0) || $("frame[name='" + target + "']").get(0) || $("#" + target).get(0); if (targetFrame && targetFrame.tagName.toLowerCase().indexOf("frame") > -1) { targetFrame.setAttribute("src", url); } else if (target) { window.open(url, target); } } } }; </script>
For the time being you can place the following JavaScript workaround at the end of the form: <script> $T = Telerik.Web.UI; $T.RadButton.prototype.initialize = function () { var that = this; $T.RadButton.callBaseMethod(that, "initialize"); //if the button is in RTL parent apply rbRtl CSS class to the holding element that._setRightToLeft(); that._createToggleStates(); that._requestIconsAndImages(); if (that.get_checked()) { that.clearCheckedRadios(that.get_uniqueGroupName()); } $T.registerRadButton(that); that._initModules(); that._initHTML(); that._attachClickEvent(true); if (that.get_enabled() && !that.get_readOnly()) { that._attachEvents(true); } that.updateClientState(); that.raiseEvent('load', Sys.EventArgs.Empty); }; </script>
SharePoint 2013 applies global styles to the inputs that affect the appearance of the RadButtons.For the time being the styles that SharePoints sets to the inputs can be overriden: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"><Icon PrimaryIconCssClass="rbAdd" /></telerik:RadButton> CSS: <style type="text/css"> .RadButton.RadButton_Default.rbSkinnedButton input { padding: 0px 10px 0px 25px; border: none; margin-left: 0px; } </style>
RadButton with ButtonType="ToggleButton", ToggleType="CheckBox" or ToggleType="Radio" in lightweight mode, renders the icons and the text labels at incorrect position. For the time being, you can use the following CSS as a workaround: .RadButton.rbCheckBox span.rbText, .RadButton.rbRadioButton span.rbText, .RadButton.rbToggleButton span.rbText { vertical-align: initial; /* FF and Chrome */ vertical-align: auto; /* IE */ } button.RadButton { vertical-align: initial; vertical-align: auto; }
RadButton peforms a duplicate request (the second request aborts the first one) when the following conditions are met: -The page is opened from Visual Studio 2008 - A RadButton exists on the page and the form is submitted when a text box is focused and enter key is hit. -Default button is not set to the form. -RadButton's UseSubmitBehavior is set to true -.NET Framework 3.5 is used. -The browser is Internet Explorer. The workaround is to either set Default button for the form or set the UseSubmitBehavior property of the RadButton to false.
For the time being the following JavaScript workaround can be used: JavaScript: function pageLoad() { fixImageURL(); } function fixImageURL() { var imageBtns = $telerik.$('.rbImageButton'); for (var i = 0; i < imageBtns.length; i++) { var btnStyle = imageBtns[i].getAttribute('style').replace("background-image:url(", "background-image:url('").replace(");", "');"); imageBtns[i].setAttribute('style', btnStyle); } } ASPX: <telerik:RadButton ID="RadButton1" runat="server" Width="50px" Height="50px"> <Image ImageUrl="50x50.png" /> </telerik:RadButton> <telerik:RadButton ID="RadButton2" runat="server" Width="50px" Height="50px"> <Image ImageUrl="50x50.png" /> </telerik:RadButton>
Currently disabled RadButton doesn't have a border for Silk skin. For the time being the border can be set manually: <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Text="Submit" BorderColor="#C9C9C9" BorderWidth="1px" Enabled="false"> </telerik:RadButton>
Currently when the RadButton is used as an Image button: - There is a flickering on mouse over and mouse out. - During the postback the image of the current or other image buttons disappears on mouse over/mouse out. The unexpected behavior is observed under Chrome and page is hosted on Cassini. It is caused due to the image requests that Chrome does for each state of the RadButton - normal and hovered.
When RadButton (ButtonType="StandardButton") is set with a particular width, the text of the button is decentralized. Fix the center of this text. For the time being can be used either the new SkinnedButton or the following workaround: <style type="text/css"> .rbDecorated { padding-left: 6px !important; padding-right: 10px !important; } </style>
Currently the value of RadButton's property 'Width' is not applied correctly and its width is not as specified.