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>
The workaround is to override the background image of the button: CSS: <style> .RadButton.RadButton_Default.rbLinkButton .rbPrimaryIcon { background-image: url("images/Groups (16x16).png"); } </style> ASPX: <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" Skin="Default"> <Icon PrimaryIconUrl="images/myImage (16x16).png" PrimaryIconTop="2" PrimaryIconLeft="2" /> </telerik:RadButton>
Currently RadButton configured as a toggle radio/checkbox button doesn't accept custom icons to be used because it already has predefined icons. For the time being the ButtonType property can be set to "StandardButton" and its background image can be hidden. For example: CSS: <style> .RadButton_Default.rbSkinnedButton, .RadButton_Default .rbDecorated, .RadButton_Default.rbVerticalButton, .RadButton_Default.rbVerticalButton .rbDecorated, .RadButton_Default .rbSplitRight, .RadButton_Default .rbSplitLeft { background-image: none !important; } </style> ASPX: <telerik:RadButton ID="RadButton3" runat="server" GroupName="OverSampling" Text="" ButtonType="StandardButton" ToggleType="Radio" Checked="false" AutoPostBack="false"> <ToggleStates> <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-on.png" Selected="true" /> <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-off.png" /> </ToggleStates> </telerik:RadButton> <telerik:RadButton ID="RadButton4" runat="server" GroupName="OverSampling" Text="No" ButtonType="StandardButton" ToggleType="Radio" AutoPostBack="false" Checked="true"> <ToggleStates> <telerik:RadButtonToggleState PrimaryIconUrl="radio6-on.png" Selected="true" /> <telerik:RadButtonToggleState PrimaryIconUrl="radio6-off.png" /> </ToggleStates> </telerik:RadButton>
For the time being the following workaround can be used: <telerik:RadButton ID="RadButton1" runat="server" Text="click" ButtonType="LinkButton" EnableEmbeddedSkins="false" Font-Underline="true"/>
For the time being the following CSS workaround can be used: CSS: <style> .RadButton.RadButton_Glow.rbSkinnedButton { vertical-align: top; } </style> Where Glow is the name of the skin that has larger dimensions (e.g., Silk, Glow, etc). ASPX: <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager> <telerik:RadTextBox runat="server" ID="txtAdminUser" /> <telerik:RadButton runat="server" ID="btn1" Text="Add" ButtonType="StandardButton" />
The width of the RadButton is higher than the actual one with Silk and Glow skins. <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Width="300px"></telerik:RadButton> <br /> <telerik:RadButton ID="RadButton2" runat="server" Skin="Glow" Width="300px"></telerik:RadButton> <br /> <telerik:RadButton ID="RadButton3" runat="server" Skin="Default" Width="300px"></telerik:RadButton> <br /> Resolution: <style> span.RadButton { -moz-box-sizing: border-box; box-sizing: border-box; } </style>
For the time being the following CSS workaround can be used: CSS: <style> html .RadButton.RadButton_Glow.RadButton.rbDisabled, html .RadButton.RadButton_Glow.RadButton.rbDisabled:hover, html .RadButton.RadButton_Glow.RadButton.rbDisabled:active, html .RadButton.RadButton_Glow.RadButton.rbDisabled:focus, html .RadButton.RadButton_Silk.RadButton.rbDisabled, html .RadButton.RadButton_Silk.RadButton.rbDisabled:hover, html .RadButton.RadButton_Silk.RadButton.rbDisabled:active, html .RadButton.RadButton_Silk.RadButton.rbDisabled:focus, html .RadButton.RadButton_Metro.RadButton.rbDisabled, html .RadButton.RadButton_Metro.RadButton.rbDisabled:hover, html .RadButton.RadButton_Metro.RadButton.rbDisabled:active, html .RadButton.RadButton_Metro.RadButton.rbDisabled:focus { background-color: transparent; background-image: none; border: none; box-shadow: none; } </style> ASPX: <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager> <telerik:RadButton ID="RadButton1" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="true" /> <telerik:RadButton ID="RadButton2" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="false" /> <telerik:RadButton ID="RadButton3" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="true" /> <telerik:RadButton ID="RadButton4" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="false" />
For the time being the following workaround can be used: CSS: <style> .RadButton.RadButton_Metro.rbSkinnedButton:focus input.rbDecorated { background-color: #25A0DA !important; } </style> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Metro"></telerik:RadSkinManager> <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox> <telerik:RadButton ID="RadButton1" runat="server" Text="click" />
A workaround is using ButtonType=SkinnedButton or using the Glow or BlackMetroTouch skin. You can use the following CSS workaround to remove the additional opacity Safari adds for the input that results in the sprite being visible: .rbDisabled .rbDecorated { opacity: 1; }
Currently the value of RadButton's property 'Width' is not applied correctly and its width is not as specified.
Declined with the reason: Item is a duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/127356
For the time being the following workaround can be used: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="Click" NavigateUrl="http://www.google.bg" Target="_blank" ButtonType="LinkButton"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype._handleNavigateUrl = function () { $ = $telerik.$; var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (target && target == "_blank") window.open(url); if (target && target == "_parent") window.parent.location.href = url; if (target && target == "_top") window.parent.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); } } </script>