This is a migrated thread and some comments may be shown as answers.
How to reduce the height of the Buttons and the height of the Toolbar?
1 Answer 83 Views
This is a migrated thread and some comments may be shown as answers.
Sri
Top achievements
Rank 1
Sri asked on 26 Jun 2009, 05:09 PM
I have the following Code and I tried some of the CSS Style that are given in other forums to reduce the height of the toolbar. But none of them worked. Can you help me to refix the height of the Toolbar?

 

<telerik:RadToolBar ID="RdToolBar" runat="server" Width="100%" OnClientButtonClicking="OnButtonClicking">

 

 

<Items>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/AddNew_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/AddNew.gif" Text="Add New" Value="ADDNEW">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Attributes.gif"

 

 

Text="Attributes" Value="ATTRIBUTES" DisabledImageUrl="~/Images/MenuImages/Attributes_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="Separator">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Cut.gif" Text="Cut"

 

 

Value="CUT" DisabledImageUrl="~/Images/MenuImages/Cut_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Paste.gif"

 

 

Text="Paste" Value="PASTE" DisabledImageUrl="~/Images/MenuImages/Paste_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Rename.gif"

 

 

Text="Rename" Value="RENAME" DisabledImageUrl="~/Images/MenuImages/Rename_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Delete.gif"

 

 

Text="Delete" Value="DELETE" DisabledImageUrl="~/Images/MenuImages/Delete_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Search.gif"

 

 

Text="Search" Value="SEARCH" DisabledImageUrl="~/Images/MenuImages/Search_Disabled.gif">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Refresh_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/Refresh.gif" Text="Refresh" Value="REFRESH">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/ExpandAll_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/ExpandAll.gif" Text="Expand All" Value="EXPAND_ALL">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Display_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/Display.gif" Text="View Hidden" Value="VIEW_HIDDEN"

 

 

CheckOnClick="True" AllowSelfUncheck="True">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Publish_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/Publish.gif" Text="Publish" Value="PUBLISH">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Print_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/Print.gif" Text="Print" Value="PRINT">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/JJInfo_Disabled.gif"

 

 

ImageUrl="~/Images/MenuImages/JJInfo.gif" Text="Help" Value="HELP">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Exit.gif"

 

 

ImageUrl="~/Images/MenuImages/Exit.gif" Text="Exit" Value="EXIT">

 

 

</telerik:RadToolBarButton>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

1 Answer, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 30 Jun 2009, 02:05 PM
Hi Sri,

Here's a sample code snippet that shows the needed approach.

<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title></title
    <style type="text/css"
        div.RadToolBar .rtbInner 
        { 
            padding: 0; 
        } 
        div.RadToolBar_Default .rtbMiddle 
        { 
            border: none; 
            height: 24px; 
        } 
        div.RadToolBar_Default .rtbOuter 
        { 
            height: 24px; 
        } 
        div.RadToolBar_Default .rtbIn 
        { 
            padding-top: 0px; 
            padding-bottom: 0px; 
        } 
        div.RadToolBar_Default .rtbWrap 
        { 
            line-height: 18px; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    </telerik:RadScriptManager> 
    <telerik:RadToolBar ID="RdToolBar" runat="server" Width="100%" OnClientButtonClicking="OnButtonClicking"
        <Items> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/AddNew_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/AddNew.gif" Text="Add New" Value="ADDNEW"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Attributes.gif" 
                Text="Attributes" Value="ATTRIBUTES" DisabledImageUrl="~/Images/MenuImages/Attributes_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="Separator"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Cut.gif" Text="Cut" 
                Value="CUT" DisabledImageUrl="~/Images/MenuImages/Cut_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Paste.gif" 
                Text="Paste" Value="PASTE" DisabledImageUrl="~/Images/MenuImages/Paste_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Rename.gif" 
                Text="Rename" Value="RENAME" DisabledImageUrl="~/Images/MenuImages/Rename_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Delete.gif" 
                Text="Delete" Value="DELETE" DisabledImageUrl="~/Images/MenuImages/Delete_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" ImageUrl="~/Images/MenuImages/Search.gif" 
                Text="Search" Value="SEARCH" DisabledImageUrl="~/Images/MenuImages/Search_Disabled.gif"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Refresh_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/Refresh.gif" Text="Refresh" Value="REFRESH"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/ExpandAll_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/ExpandAll.gif" Text="Expand All" Value="EXPAND_ALL"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Display_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/Display.gif" Text="View Hidden" Value="VIEW_HIDDEN" 
                CheckOnClick="True" AllowSelfUnCheck="True"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Publish_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/Publish.gif" Text="Publish" Value="PUBLISH"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Print_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/Print.gif" Text="Print" Value="PRINT"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/JJInfo_Disabled.gif" 
                ImageUrl="~/Images/MenuImages/JJInfo.gif" Text="Help" Value="HELP"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Separator" Value="SEPARATOR"
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" DisabledImageUrl="~/Images/MenuImages/Exit.gif" 
                ImageUrl="~/Images/MenuImages/Exit.gif" Text="Exit" Value="EXIT"
            </telerik:RadToolBarButton> 
        </Items> 
    </telerik:RadToolBar> 
    </form> 
</body> 
</html> 


Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.
Asked by
Sri
Top achievements
Rank 1
Answers by
Paul
Telerik team
Share this question
or