Display problem with wide menu

3 posts, 0 answers
  1. Tim
    Tim avatar
    57 posts
    Member since:
    Apr 2011

    Posted 14 Jun 2011 Link to this post


    I am dynamically creating a vertical menu using server side code to create the menuitems.

    The data for the text is coming from database entries that represent names
    of things in our system.

    These names can be quite long.

    Everything seemed fine with the menu until I entered data into our DB that caused
    the menu to stretch horizontally.

    When I hover over an item there is a gap in the highlighting.
    There is a block of color wide rounded corners on the left. Then a gap.
    Then the rest of the highlight, with rounded corners on the right.

    Also the two separators I added to my menu don't stretch all the way to
    the right.

    Am I doing something wrong, or is there perhaps a bug?

  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 15 Jun 2011 Link to this post

    Hello Tim,

    Can you show us a screen shot of what you're talking about? Also, is the database column you're binding the menu to, is it a Char type, reason being is that it would add extra spaces to the end of the string, so trimming might help.
  3. Kate
    Kate avatar
    1898 posts

    Posted 16 Jun 2011 Link to this post

    Hi Tim,

    Actually it is not a bug of the RadMenu but it is due to the width of the sprite that is applied to the control. There are also two ways to correct this behaviour. The first one is to change the width of the sprite itself and simply replace the sprite in the project. Since we currently we do not have such a help article for the RadMenu here you can see a detailed example how this can be achieved using one of the Telerik's controls - RadComboBox. The second approach would be simply to apply the following css class selector that changes the position of the current sprite and corrects the appearance(this example is for t he Default skin of the menu, in case you use any other skin, you could simply substitute the name):
    div.RadMenu_Default .rmGroup a.rmLink:hover,
    div.RadMenu_Default .rmGroup a.rmFocused,
    div.RadMenu_Default .rmGroup a.rmSelected,
    div.RadMenu_Default .rmGroup a.rmExpanded {
        background-position: 0-288px;

    Kind regards,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top