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

Shrink ToolBar Height to Minimum Possible

4 Answers 204 Views

ToolBar

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

Greg asked on 24 Nov 2009, 09:14 PM

recnavlast.gif

recnavprev.gif

recnavfirst.gif

recnavnext.gif

I'm trying to shrink the ToolBar height to match the height of my button images (*.GIF files). The RadToolBar Height property is buggy and doesn't work properly. My buttons are only 9 pixels high so I should be able to shrink the ToolBar height by about 30%. I have tried all the CSS/Style examples on the forums and none of them work correctly.

I want to shrink the height to the minimum possible given my 9 pixel high button images. I do not want to apply this height shrinking to all tool bars on the page. Only some of them. I want to leave the rest of the tool bars at the stock height. I'm running Visual Studio 2008 SP1 with Telerik 2009 Q3, IE8 and Firefox. I'm currently using the Office 2007 Skin but it would be nice if the shrinking solution worked with all skins without modification.

Here is my test page. I have attached the button GIF files.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TelerikWebForm.aspx.cs" Inherits="TelerikWebForm" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                </telerik:RadAjaxManager> 
        
                <div> 
        
                    <br/><br/><br/> 
        
                    <telerik:RadToolBar ID="rtbRecNavCtl" Runat="server">  
        
                        <Items> 
        
                            <telerik:RadToolBarButton runat="server"   
        
                                ImageUrl="RecNavFirst.gif" CausesValidation="False" Value="F">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server"   
        
                                ImageUrl="RecNavPrev.gif" CausesValidation="False" Value="P">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server"   
        
                                ImageUrl="RecNavNext.gif" CausesValidation="False" Value="N">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server"   
        
                                ImageUrl="RecNavLast.gif" CausesValidation="False" Value="L">  
        
                            </telerik:RadToolBarButton> 
        
                        </Items> 
        
                    </telerik:RadToolBar> 
        
                    <br/><br/><br/> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Thank You,
Greg

4 Answers, 1 is accepted

answered on 27 Nov 2009, 08:45 AM

Hello Greg,

Please add the following css styles to your page in order to shrink the toolbar:

<style type="text/css">

div.RadToolBar .rtbOuter {

display: block !important;

}

.RadToolBar .rtbInner {

padding: 0 !important;

}

.RadToolBar .rtbItem {

height: 15px !important;

}

.RadToolBar .rtbIcon {

padding: 0 !important;

}

</style>

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Accepted

answered on 01 Dec 2009, 07:42 AM

Hello Greg,

This can be achieved very easily, just set CssClass property to the toolbar that needs to be shrinked:

<telerik:RadToolBar ID="rtbRecNavCtl" Runat="server" CssClass="smallToolBar">

and modify your styles to apply only to it using the class:

<style type="text/css">

.smallToolBar .rtbOuter {

display: block !important;

}

.smallToolBar .rtbInner {

padding: 0 !important;

}

.smallToolBar .rtbItem {

height: 15px !important;

}

.smallToolBar .rtbIcon {

padding: 0 !important;

}

</style>

Best regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Shrink ToolBar Height to Minimum Possible

4 Answers, 1 is accepted