How Do I Set Height of a Button

[MissioDei]

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?

[Serrin]

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;
}

a.radfd_Web20
{
    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">
    a.radfd_Web20
    {
        height: 35px;
    }
</style>

... 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). 

[Lambros]

Hi

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?

Thanks

[Georgi Tunev]

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.


Greetings,
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.

[Robert]

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 (http://www.alistapart.com/articles/slidingdoors) 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.

Bob

[Martin]

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.