Shrinking the height of the toolbar

3 posts, 0 answers
  1. Rajesh
    Rajesh avatar
    28 posts
    Member since:
    Jul 2010

    Posted 06 Jul 2011 Link to this post

    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



  2. Rajesh
    Rajesh avatar
    28 posts
    Member since:
    Jul 2010

    Posted 07 Jul 2011 Link to this post

    Any update ?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top