Selector Height too big for item

2 posts, 0 answers
  1. SSirica
    SSirica avatar
    50 posts
    Member since:
    Jan 2007

    Posted 15 Sep 2015 Link to this post

    I have a Toolbar setup in the following manner:


    .smallToolBar .rtbOuter {
        display: block !important;
    .smallToolBar .rtbInner {
        padding: 0 !important;
    .smallToolBar .rtbItem {
        height: 20px !important;
    .smallToolBar .rtbIcon {
        padding: 0 !important;
    <telerik:RadToolBar ID="rtbFuncs" runat="server" EnableRoundedCorners="true" EnableShadows="true" Skin="Windows7" CssClass="smallToolBar"
        OnClientButtonClicked="OnClientButtonClicked" AutoPostBack="False" CausesValidation="False">
            <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="Functions" Height="20px" Font-Size="9px" ImagePosition="BelowText" CausesValidation="False">
                    <telerik:RadToolBarButton Text="Non-Native" Value="bbNonNat" Height="25px" CausesValidation="False">
                    <telerik:RadToolBarButton IsSeparator="true">
                    <telerik:RadToolBarButton Text="Show Offload History" Value="bbOffHist" Height="25px" CausesValidation="False">
                    <telerik:RadToolBarButton Text="Re-Provision" Value="bbReProv" Height="25px" CausesValidation="False">

    I have attached what it looks like.  As you can see in the picture the selector is too wide in height for the item.  how do I make the highliter smaller?
  2. Magdalena
    Magdalena avatar
    411 posts

    Posted 17 Sep 2015 Link to this post


    We highly recommend to use the control in the lightweight render mode for appearance customizing. We do not recommend to apply styles to the sever markup of the control. The following CSS will reduce height of radToolBar buttons in the lightweight render mode:
    html .RadToolBar {
        font-size: 9px;
    html .RadToolBar .rtbButton {
        padding-top: 0;
        padding-bottom: 0;
    html .RadToolBar .rtbVOriented .rtbArrow {
        margin-top: 0;
        line-height: 8px;
    html .rtbSlide .rtbLink {
        padding-top: 0;
        padding-bottom: 0;
    html .rtbPopup {
        font-size: 9px;

    Find a sample project in the attachment. If you would like to increase height of buttons, you can achieve it by increasing the top and bottom padding.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top