How to reduce the height of the Buttons and the height of the Toolbar?

[Sri]

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>

 

[Paul]

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.