Shot in the dark to see if you could provide more information regarding a custom button height issue I am seeing. Using your Height40 example I ran in Visual Studio 2013 and got a bad display (see attached). Ran the same page in VS2010 and it looks completely fine. I'm attaching the project and screen shot for your review. I have no idea what to do would appreciate any help you might have.
John
<%@ Page %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
/* IE7 line height */
* + html a.customHeight40 input.rbDecorated
{
line-height: 40px !important;
}
/* new sprite */
a.customHeight40, .customHeight40 input.rbDecorated
{
background-image: url(customHeight.gif) !important;
}
/* right rounded corner position */
a.customHeight40
{
background-position: right 0;
}
/* left rounded corner position */
a.customHeight40 input.rbDecorated
{
background-position: 0 -40px;
}
/* right rounded corner position hover state */
a.customHeight40:hover
{
background-position: right -80px;
}
/* left rounded corner position hover state */
a.customHeight40:hover input.rbDecorated
{
background-position: left -120px;
}
/* right rounded corner position active and focus states */
a.customHeight40:focus, a.customHeight40:active
{
background-position: right -160px;
}
/* left rounded corner position active and focus states */
a.customHeight40:focus input.rbDecorated, a.customHeight40:active input.rbDecorated
{
background-position: left -200px;
}
/* IE and Opera Focus and Active state fix with additional class, should be used !important */
a.customHeight40.rbPressedButton
{
background-position: right -160px !important;
}
a.customHeight40.rbPressedButton input.rbDecorated
{
background-position: left -200px !important;
}
/* IE8 Onclickg filckering Bug fix */
a.customHeight40.rbPressedIE8 input.rbDecorated, a.customHeight40.rbPressedIE8Rtl input.rbDecorated
{
-ms-background-position-x: 1px !important;
-ms-background-position-y: -199px !important;
}
a.customHeight40.rbPressedIE8Rtl input.rbDecorated
{
-ms-background-position-x: -1px !important;
}
/* fix end */
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadButton ID="RadButton3" runat="server" Text="Default Button Height 40px"
Height="40px" CssClass="customHeight40">
</telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server" Text="Default Button Height 22px">
</telerik:RadButton>
</form>
</body>
</html>
John
<%@ Page %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
/* IE7 line height */
* + html a.customHeight40 input.rbDecorated
{
line-height: 40px !important;
}
/* new sprite */
a.customHeight40, .customHeight40 input.rbDecorated
{
background-image: url(customHeight.gif) !important;
}
/* right rounded corner position */
a.customHeight40
{
background-position: right 0;
}
/* left rounded corner position */
a.customHeight40 input.rbDecorated
{
background-position: 0 -40px;
}
/* right rounded corner position hover state */
a.customHeight40:hover
{
background-position: right -80px;
}
/* left rounded corner position hover state */
a.customHeight40:hover input.rbDecorated
{
background-position: left -120px;
}
/* right rounded corner position active and focus states */
a.customHeight40:focus, a.customHeight40:active
{
background-position: right -160px;
}
/* left rounded corner position active and focus states */
a.customHeight40:focus input.rbDecorated, a.customHeight40:active input.rbDecorated
{
background-position: left -200px;
}
/* IE and Opera Focus and Active state fix with additional class, should be used !important */
a.customHeight40.rbPressedButton
{
background-position: right -160px !important;
}
a.customHeight40.rbPressedButton input.rbDecorated
{
background-position: left -200px !important;
}
/* IE8 Onclickg filckering Bug fix */
a.customHeight40.rbPressedIE8 input.rbDecorated, a.customHeight40.rbPressedIE8Rtl input.rbDecorated
{
-ms-background-position-x: 1px !important;
-ms-background-position-y: -199px !important;
}
a.customHeight40.rbPressedIE8Rtl input.rbDecorated
{
-ms-background-position-x: -1px !important;
}
/* fix end */
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadButton ID="RadButton3" runat="server" Text="Default Button Height 40px"
Height="40px" CssClass="customHeight40">
</telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server" Text="Default Button Height 22px">
</telerik:RadButton>
</form>
</body>
</html>
1 Answer, 1 is accepted
0
Hi,
Thanks for contacting Telerik support. As I understand the issue exits in VS2013 design time. Note that this is not a built-in functionality, but a custom solution and it is not supposed to be supported out of the box of RadButton. Note also that we just starting to work with the design time of VS2013 and probably some visual glitches will be fixed soon or later. Also if a custom visual glitch does not affect the real browser rendering and behavior it will be considered as a minor bug.
Note also, that we have released ButtonType SkinnedButton which uses CSS to apply gradients and rounded corners. Using that button type it is not necessary to create custom sprites and CSS in order to have a different button height:
Considering the above example and SkinnedButton which offers rich UI buttons, it is a developer's decision to maintain and support buttons with custom height.
Regards,
Bozhidar
Telerik
Thanks for contacting Telerik support. As I understand the issue exits in VS2013 design time. Note that this is not a built-in functionality, but a custom solution and it is not supposed to be supported out of the box of RadButton. Note also that we just starting to work with the design time of VS2013 and probably some visual glitches will be fixed soon or later. Also if a custom visual glitch does not affect the real browser rendering and behavior it will be considered as a minor bug.
Note also, that we have released ButtonType SkinnedButton which uses CSS to apply gradients and rounded corners. Using that button type it is not necessary to create custom sprites and CSS in order to have a different button height:
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadButton runat="server" Text="Default Button"></telerik:RadButton> <telerik:RadButton runat="server" Text="Skinned Button" ButtonType="SkinnedButton"></telerik:RadButton> <telerik:RadButton runat="server" Text="Skinned Button 33" Height="33" ButtonType="SkinnedButton"></telerik:RadButton> <telerik:RadButton runat="server" Text="Skinned Button 53" Height="53" ButtonType="SkinnedButton"></telerik:RadButton> </form>Considering the above example and SkinnedButton which offers rich UI buttons, it is a developer's decision to maintain and support buttons with custom height.
Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.