WebBlue Padding on Menu

4 posts, 1 answers
  1. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 16 Jun 2008 Link to this post

    I'm using the menu control with the WebBlue skin as well as a css class to make some minor adjustments to it (you guys provided the css class to me).  Here's the code below:

    Code in CSS file:

    div.MenuWithEnds
    {
        border-left: solid 1px #69798C;
        border-right: solid 1px #69798C;
        padding-left: 0px;
        padding-right: 0px;
        position:absolute;
        right:10px;
    }

    Code in ASPX page:

    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue" Flow="Horizontal" CssClass="MenuWithEnds"
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        <Items> 
            <telerik:RadMenuItem id="mnuTools" runat="server" Text="Tools" Value="Tools" ToolTip="Tools" style="z-index:10000;"
            </telerik:RadMenuItem> 
            <telerik:RadMenuItem id="mnu2" runat="server" Text="Item2" Value="Item2" NavigateUrl=""
            </telerik:RadMenuItem> 
            <telerik:RadMenuItem id="mnu3" runat="server" Text="Item3" Value="Item3" NavigateUrl=""
            </telerik:RadMenuItem> 
            <telerik:RadMenuItem id="mnu4" runat="server" Text="Item4" Value="Item4" NavigateUrl=""
            </telerik:RadMenuItem> 
            <telerik:RadMenuItem id="mnuLogout" runat="server" Text="Log out" ToolTip="Log out" Value="Logout" NavigateUrl="~/Logout.aspx"
            </telerik:RadMenuItem> 
        </Items> 
    </telerik:RadMenu> 

    My problem is that the left and right padding on each item is too large.  How can I adjust my css class (or add a new css class) so that I can adjust the padding of the menu items?
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Jun 2008 Link to this post

    Hello Matt,

    Actually, the spacing between the menu items is not caused by padding attributes, but by the width which the WebBlue skin applies to the items. Please, overwrite this rule with the following css selector:

     .RadMenu_WebBlue .rmItem a.rmLink   
            {         
                width:auto/*or fixed width: 70px */ 
            } 


    Regards,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 17 Jun 2008 Link to this post

    Great!  That fixed that problem, but now I'm still having issues with the spacing on the sub items (the menu items that roll out when you hover over a root item).  How can I change the width of those items?  The text of the sub items only takes up about 2/3 of the width of the sub item, so there is a lot of space to the right. 

    Another thing, the icons on the sub items are flush against the text (there is no gap between the icon and the text).  Is there a way on the control or through CSS to add some space between the icon and the text?

    Thanks,
    Matt
  4. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 20 Jun 2008 Link to this post

    Hi Matt,

    The remedy for these problems is found within these lines of css:
    div.RadMenu_WebBlue .rmGroup .rmLink 
        min-width10px
     
    div.RadMenu_WebBlue .rmGroup .rmText { 
        font-weight:normal
        padding-left:12px/* these two can be fine-tuned */ 
        padding-right:12px
     
     
    div.RadMenu_WebBlue .rmGroup .rmLeftImage { 
        margin3px 4px 0 2px/* adjust these values to your liking */ 

    You could also control the width of the submenu using <GroupSettings Width="60px" /> (after setting the min-width in the css above to a small value).

    Greetings,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top