How Do I Set Height of a Button

6 posts, 0 answers
  1. MissioDei
    MissioDei avatar
    17 posts
    Member since:
    Aug 2008

    Posted 05 Feb 2009 Link to this post

    I'm using form decorator "web20" to style buttons on a page. I want to alter the height of the buttons. What is the quickest route to do this?
  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 05 Feb 2009 Link to this post

    Hey Strategon,

    Well you run into a slight issue here...  To get the sweet looking buttons to go with the Web20 theme, this is the css used:

    /* button settings */  
    a.radfd_Web20, a.radfd_Web20 span  
        background-image: url(FormDecorator/ButtonSprites.gif);  
        /* font: bold 11px Verdana, Verdana, Arial, Sans-serif; */  
        color: #fff;  
    a.radfd_Web20.radfdInputDisabled:hover span  
        color: #fff;  
        padding-left: 4px;  
    a.radfd_Web20 span:hover  
        color: #006;  
    a.radfd_Web20 .radfdInnerSpan  
        margin-right: 4px;  
        background-position: 0 -21px;  
    /* end of button settings */ 

    So as you can see, they use an image to cover the button styling...  While you can do something like this:

    <style type="text/css">  
            height: 35px;  

    ... it won't effect the image (the above example shows almost two full button images).  Basically, you'd need to go into the sprite source image (FormDecorator/ButtonSprites.Gif), get the image used for the background, modify it to suit the height you need, then customize the css above (background-position, -image, possibly padding and margin). 

  3. Lambros
    Lambros avatar
    11 posts
    Member since:
    Oct 2007

    Posted 19 Mar 2009 Link to this post


    Is it possible to have different height for buttons ?
    Let's say that I have to buttons. And want  to have height of 1st 25px  and 2nd 50px.
    How to do it with form decorator?


  4. Georgi Tunev
    Georgi Tunev avatar
    7207 posts

    Posted 19 Mar 2009 Link to this post

    Hi Lambros,

    In theory this is possible, achieving such functionality with RadFormDecorator will lead to performance problems. To be able to style the buttons correctly (e.g. with rounded corners), RadFormDecorator must know its height. If the CSS logic is extended to cover scenarios for buttons with different height, this will lead to much slower rendering of the decorated controls on the page. That is why we decided to use fixed height for the buttons.
    This being said, I would suggest to exclude your buttons from the list of decorated controls (you should use the ControlsToSkip property for that) and to style these buttons by using custom CSS.

    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 20 Mar 2009 Link to this post

    Hi, just my 2 cents,

    This also means that the buttons will not size correctly when I adjust the text size in my browser.  Has there been any thought given to creating a button that would be more flexible for this instance?  In the past I've used HTML buttons with tall image backgrounds that would avoid the tiling problem when the text is enlarged but in doing so I'm still stuck with a square button and no rounded corners.  Is there any way to work with a version of the sliding doors concept ( to make the button's height less rigid and still get the rounded corners?  My guess is that may only work with either the top or the bottom but not with both.  Has anyone given that some thought?

    I would be interested to know what other ideas you may have persued to make the buttons more flexible in this manner and perhaps found that it wasn't possible.  There are certainly other avenues, like changing the button to an anchor but then that would mess with the whole concept.

  6. Martin
    Martin avatar
    585 posts

    Posted 23 Mar 2009 Link to this post

    Hello Robert,

    When we started developing FormDecorator, one of the things we had in mind was the smooth decoration when page loads. To ensure this, we took all input controls' original dimensions, padding, margin, font size, line-height, height, etc and hardcoded them in the base CSS of the control. We wanted to reduce the jumping of the page prior to decoration, this is why our skins do not support setting of height.

    However, the easiest way to create higher buttons is to register an external skin for form decorator, along with its base css file (FormDecorator.css), create images of your own for the respective sprites and change the values you need to be bigger in FormDecorator.css.

    If you decide to so this step:

    1. Set EnableEmbeddedBaseStylesheet="false" in the server declaration of FormDecorator;
    2. Set EnableEmbeddedSkins="false" in the server declaration of FormDecorator;
    3. Set Skin="SkinName"  in the server declaration of FormDecorator;
    4. Register FormDecorator.css in the head section of your webpage, and immediately after it, the CSS file for your custom skin, for example - FormDecorator.MyCustomSkin.css.
    5. You may modify an existing skin. They are stored in RadControlsInstallationFolder/Skins/

    Best wishes,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Back to Top