RadFormDecorator button so wide

[Tony Polad]

Hi,

The RadFormDecorator set my button size wider than it should be.

To produce it, its very easy.

Just have a page with RadFormDecorator
and
A Button
Set the text of the button as "..."

It is suppose to be very small, but it turns out the RadFormDecorator makes it so big.

Is there a way to fix that ?

Thanks.

[Tony Polad]

In addition of my question, the problem is exists in IE 7.

Thanks.

[Martin]

Hello Susanto,

The problem in your case is caused by the fact that input controls have different default sizes, paddings and margins with different browsers. These sizes are event different with different versions of the same browser. In order to be consistent, we decided to keep this behavior when we started developing RadFormDecorator.

On solving the issue:

1. Give the button you want to skin an id and have in mind that the skinned button id will be "Skinned" + yourButtonId, for example - if your button id is MyButton, the skinned button id will be SkinnedMyButton.

2. Add the following styles into the head of your webpage or in your external stylesheet:

#SkinnedMyButton
{
 min-width: 20px !important;
}
   
#SkinnedMyButton span
{
 padding: 0 !important;
 margin: 0 !important;
}

... and then play with the min-width property to get the desired with of the buttons.

If you are using multiple buttons with "..." value, you may use a class selector, instead of id(s):

.radfdSkinnedFormButton
{
 min-width: 20px !important;
}
   
.radfdSkinnedFormButton span
{
 padding: 0 !important;
 margin: 0 !important;
}

Make sure you do not forget or remove the !important flag at the end of these properties' values, otherwise your new settings will not work.

Martin Ivanov
the Telerik team

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

[Tony Polad]

Hi,

I havent tried the solution yet, but I am wondering, do I have to apply it to all buttons in my development ?

If thats the case, how do you guaranteed that the RadFormDecorator wont have any other problem with other controls ?

PS: I havent started with checkbox + other controls yet.

Thanks.

[Tony Polad]

Hi,

I just tried it and it works nicely.

I just need to put it into my css so I dont need to apply it to every single button.

thanks for the help.

[Martin]

Hi Susanto Siman,

I'm glad I was able to help.

Have a great weekend,
Martin Ivanov
the Telerik team

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