Button Height with different DevEnvironments

2 posts, 0 answers
  1. John
    John avatar
    19 posts
    Member since:
    Sep 2011

    Posted 27 Feb 2014 Link to this post

    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.

    ​<%@ 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">
    <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 */
    background-position: right 0;
    /* left rounded corner position */
    a.customHeight40 input.rbDecorated
    background-position: 0 -40px;
    /* right rounded corner position hover state */
    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 */
    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 */
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <telerik:RadButton ID="RadButton3" runat="server" Text="Default Button Height 40px"
    Height="40px" CssClass="customHeight40">
    <telerik:RadButton ID="RadButton2" runat="server" Text="Default Button Height 22px">
  2. Bozhidar
    Bozhidar avatar
    677 posts

    Posted 03 Mar 2014 Link to this post


    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">
        <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>

    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.

    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.
  3. DevCraft R3 2016 release webinar banner
Back to Top