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:

     

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

    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
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2015 Link to this post

    Hello,

    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.

    Regards,
    Magdalena
    Telerik
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top