RadFormDecorator button so wide

6 posts, 0 answers
  1. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 07 Aug 2008 Link to this post

    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.
  2. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 10 Aug 2008 Link to this post

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

    Thanks.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Admin
    Martin avatar
    585 posts

    Posted 12 Aug 2008 Link to this post

    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.
  5. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 12 Aug 2008 Link to this post

    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.
  6. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 14 Aug 2008 Link to this post

    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.



  7. Martin
    Admin
    Martin avatar
    585 posts

    Posted 15 Aug 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017