
Tony Polad
Top achievements
Rank 1
Tony Polad
asked on 07 Aug 2008, 07:06 AM
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.
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.
5 Answers, 1 is accepted
0

Tony Polad
Top achievements
Rank 1
answered on 10 Aug 2008, 11:09 PM
In addition of my question, the problem is exists in IE 7.
Thanks.
Thanks.
0
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.
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.
0

Tony Polad
Top achievements
Rank 1
answered on 12 Aug 2008, 09:01 AM
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.
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.
0

Tony Polad
Top achievements
Rank 1
answered on 14 Aug 2008, 07:39 AM
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.
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.
0
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.
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.