Shrinking the height of the toolbar

[Rajesh]

Hi,

        I have a simple toolbar which has many buttons. Add, Save, Delete etc amd all buttons have separate images. Currently size of these images are 16X16 pixels
 Now we have to shrink the height of the toolbar by 3 pixels. I'm able to adjust the height of the toolbar to the required level. But there seems some problems:-

1. Vertical alignment of the buttons do not look good. Instead of aligned middle they look bottom aligned.
2. On button hover, we can see the hover image cliped from the bottom (Please compare Current view.jpg and Changed view.jpg for understanding)

I hacve also rediced the height of the images to 13X13 pxels. But things are not working.

Code:-
Master page:-

 

<telerik:RadPane ID="rPanContentPlaceHplder" runat="server" Height="100%" Width="100%"

 

 

Scrolling="None">

 

 

<telerik:RadSplitter ID="rSplHeaderToolBar" runat="server" Height="100%" Width="100%"

 

 

Orientation="Horizontal">

 

 

<telerik:RadPane ID="rPanHeader" runat="server" Height="25px" Width="100%" Scrolling="None">

 

 

<uc:HeaderToolBar ID="ucMEHeaderToolBar" runat="server" />

 

 

</telerik:RadPane>

 

 

<telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both" Style="overflow: scroll;

 

vertical-align: top;"

 

Width="100%">

 

 

<asp:ContentPlaceHolder ID="content" runat="server">

 

 

</asp:ContentPlaceHolder>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</telerik:RadPane>

 

Tool bar code:-

<

 

telerik:RadToolBar ID="barTopCommandBar" runat="server" Height="100%" Width="100%"

 

 

OnPreRender="barTopCommandBar_PreRender" OnButtonClick="barTopCommandBar_ButtonClick"

 

 

OnClientButtonClicking="clientbuttonclick" CssClass="toolbarbuttons">

 

 

<Items>

 

 

<telerik:RadToolBarButton runat="server" CommandName="ADD" ImageUrl="~/Images/TLB_ADDNEW_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlAdd %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipAdd %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE_REVALIDATE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="Save_revalidate" ImageUrl="~/Images/TLB_SAVE_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlSaveRevalidate %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipSaveRevalidate %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE" ImageUrl="~/Images/TLB_SAVE_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlSave %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipSave %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE" ImageUrl="~/Images/TLB_DELETE_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlDelete %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipDelete %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="UNDO_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="UNDO" ImageUrl="~/Images/TLB_UNDO_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlUndo %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipUndo %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AND_REPLACE_SEPRATOR"

 

 

IsSeparator="true" Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="Save_Replace" ImageUrl="~/Images/TLB_EDIT_16.gif"

 

 

PostBack="false" OnClick="javascript:OpenSearchAndReplace();" Text="<%$ Resources:PDICulture, htbControlSaveReplace %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipSaveReplace %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="ADD_FROM_TEMPLATE_SEPRATOR"

 

 

Visible="false" IsSeparator="true" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="ADD_FROM_TEMPLATE" Visible="false"

 

 

ImageUrl="~/Images/addtemplate.png" Text="<%$ Resources:PDICulture, htbControlAddFromTemplate %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlAddFromTemplate %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AS_TEMPLATE_SEPRATOR"

 

 

Visible="false" IsSeparator="true" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AS_TEMPLATE" Visible="false"

 

 

ImageUrl="~/Images/savetemplate.png" Text="<%$ Resources:PDICulture, htbControlSaveAsTemplate %>"

 

 

ToolTip="Save as Template">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE_TEMPLATE_SEPRATOR" Visible="false"

 

 

IsSeparator="true" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE_TEMPLATE" Visible="false"

 

 

ImageUrl="~/Images/deletetemplate.png" Text="<%$ Resources:PDICulture, htbControlDeleteTemplate %>"

 

 

ToolTip="Delete Template">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="REFRESH" ImageUrl="~/Images/TLB_REFRESH_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlRefresh %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipRefresh %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="NEW_MESSAGE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="NEW_MESSAGE" Text="<%$ Resources:PDICulture, htbControlNewMessage %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipNewMessage %>" ImageUrl="~/Images/PicSendNewMsg_16x16.png">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="ACK_MESSAGE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="ACK_MESSAGE" Text="<%$ Resources:PDICulture, htbControlAcknowledgement %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipAcknowledgement %>" Visible="false">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE_MESSAGE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="DELETE_MESSAGE" Text="<%$ Resources:PDICulture, htbControlDeleteMessage %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipDeleteMsg %>" Visible="false">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="REPLY_MESSAGE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="REPLY_MESSAGE" Text="<%$ Resources:PDICulture, htbControlReplyMessage %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipReplyMessage %>" Visible="false">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_MESSAGE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_MESSAGE" Text="<%$ Resources:PDICulture, htbControlRefreshMessage %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipRefreshMessage %>" Visible="false" ImageUrl="~/Images/cmdCheckForMsg16x16.png">

 

 

</telerik:RadToolBarButton>

 

 

 

<telerik:RadToolBarButton runat="server" CommandName="PRINT_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="PRINT" ImageUrl="~/Images/TLB_PRINT_16.png"

 

 

Text="<%$ Resources:PDICulture, htbControlPrint %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipPrint %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="UNPROCESSED_MESSAGE_SEPRATOR"

 

 

IsSeparator="true" Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="UNPROCESSED_MESSAGE" Text="<%$ Resources:PDICulture, htbControlUnprocessedMessage %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipUnprocessedMessage %>" ImageUrl="~/Images/TLB_PRINT_16.png">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="PROFILE_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="PROFILE" Text="<%$ Resources:PDICulture, htbControlMProfile %>"

 

 

ToolTip="<%$ Resources:PDICulture, htbControlToolTipMProfile %>">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" CommandName="HELP_SEPRATOR" IsSeparator="true"

 

 

Visible="false" />

 

 

<telerik:RadToolBarButton runat="server" CommandName="HELP" ImageUrl="~/Images/TLB_HELP2_16.gif"

 

 

Text="<%$ Resources:PDICulture, htbControlHelp %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipHelp %>"

 

 

PostBack="false" onClick="javascript:openHelp();">

 

 

</telerik:RadToolBarButton>

 

 

</Items>

 

</

 

telerik:RadToolBar>

 

Thanks
Rajesh

[Rajesh]

Any update ?

[Kate]

Hi Rajesh,

Can you please send us also the definition of the toolbarbuttons css class that you use in your code, so we can try to reproduce the issue that you encounter and help you out.

Best wishes,
Kate
the Telerik team