This is a migrated thread and some comments may be shown as answers.

how to make the buttons thinner without distorting

5 Answers 67 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 23 Jun 2009, 09:18 PM
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.

 

5 Answers, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
answered on 24 Jun 2009, 06:27 PM
Also how do you remove the border on hover, I tried so many things and could not do it.
0
Accepted
Yana
Telerik team
answered on 25 Jun 2009, 12:49 PM
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.
0
Martin
Top achievements
Rank 1
answered on 25 Jun 2009, 02:40 PM
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.

 

0
Accepted
Yana
Telerik team
answered on 30 Jun 2009, 06:49 AM
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.
0
Martin
Top achievements
Rank 1
answered on 30 Jun 2009, 01:38 PM
Thank you very much for resolving all the issues.
Tags
ToolBar
Asked by
Martin
Top achievements
Rank 1
Answers by
Martin
Top achievements
Rank 1
Yana
Telerik team
Share this question
or