how to make the buttons thinner without distorting

6 posts, 2 answers
  1. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 23 Jun 2009 Link to this post

    the buttons drawn by default are fat [top, bottom], below is a simple code.

     

    <telerik:RadToolBar ID="lookup_button" runat="server" Skin="Default" OnClientButtonClicked="OnClientToolbarLookupButtonClicked" EnableViewState="false">

     

     

    <Items>

     

     

    <telerik:RadToolBarButton runat="server" PostBack="false" style="font-size: 8pt; font-weight: bolder;" Text="Lookup">

     

     

    </telerik:RadToolBarButton>

     

     

    </Items>

     

     

    </telerik:RadToolBar>

    we tried to play around with the padding but this distorted the button. How can can we make the buttons in the RadToolBar thinner. Thanks.

     

  2. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 24 Jun 2009 Link to this post

    Also how do you remove the border on hover, I tried so many things and could not do it.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Jun 2009 Link to this post

    Hello Martin,

    Please add the following css style to your page in order to make RadToolBar thinner:

     <style type="text/css">  
            div.RadToolBar .rtbIn {  
                padding-top1px;  
            }  
            div.RadToolBar .rtbWrap {  
                line-height16px;  
            }  
     </style> 

    Greetings,
    Yana
    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. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 25 Jun 2009 Link to this post

    Thank you, that shrunk all of our buttons.
    One set of toolbar buttons we need to shrink it even further.

    http://i839.photobucket.com/albums/zz316/dev2009_2009/toolbarbutton.jpg

    we would like to shrink the blue area even further without disturbing the image, it is using the web20 skin.

    div.RadToolBar_Web20 .rtbIn
    {padding-top: 0px;

     

     

    padding-bottom: 0px;}

     

     

    div.RadToolBar_Web20 .rtbWrap

     

     

     

    {line-height: 14px;}

    Once again thank you.

     

  6. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 30 Jun 2009 Link to this post

    Hi Martin,

    Please add also the following css styles and let us know how it goes:

    div.RadToolBar .rtbInner {  
        padding: 0;  
    }  
       
    div.RadToolBar_Web20 .rtbMiddle {  
        bordernone;  
        height18px;  
    }  
     
    div.RadToolBar_Web20 .rtbOuter {  
        height:18px;  

    Greetings,
    Yana
    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.
  7. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 30 Jun 2009 Link to this post

    Thank you very much for resolving all the issues.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017