Skin css issue, Menu items wrapping

2 posts, 0 answers
  1. Shaun
    Shaun avatar
    1 posts
    Member since:
    Aug 2006

    Posted 22 Sep 2008 Link to this post

    In trying to get the menu control to add a border and highlight the item under the mouse, I've run into an issue with text being dropped to a new line and the item size increasing vertically.  It seems to be an issue with the padding of rmItem.  If I add even one pixel of padding to the item--as is done in the embedded Outlook skin--I see the issue.  I'm including stylesheet excerpts with changed portions for a version that does not have the problem (border and padding commented out) and one that does.

    Version with border (and problem):
    --
    Image sample showing the issue
    .rmRootGroup .rmItem
    {
    /* with inset border */
    padding:1px;
    width:100%;
    }

    .RadMenu_Activate .rmVertical .rmExpanded,
    .RadMenu_Activate .rmVertical .rmExpanded:hover
    {
    background:#93B5E7 left top repeat-x;
    /* with inset border */
    border:1px solid #002D96;
    }
    /* with inset border */
    .RadMenu_Activate .rmGroup .rmLink
    {
    padding:1px;
    }

    .RadMenu_Activate .rmGroup .rmLink:hover,
    .RadMenu_Activate .rmGroup .rmFocused,
    .RadMenu_Activate .rmGroup .rmExpanded
    {
    background-color:#FFEEC2;
    background-image:none;
    border-left: 0px;
    /* with inset border */
    padding: 0px;
    border:1px solid #002D96;
    }

    Version without border (and without the problem)
    --
    Image sample showing how the text should be displayed
    .rmRootGroup .rmItem
    {
    /* with inset border
    padding:1px; */
    width:100%;
    }

    .RadMenu_Activate .rmVertical .rmExpanded,
    .RadMenu_Activate .rmVertical .rmExpanded:hover
    {
    background:#93B5E7 left top repeat-x;
    /* with inset border
    border:1px solid #002D96;*/
    }

    /* with inset border
    .RadMenu_Activate .rmGroup .rmLink
    {
    padding:1px;
    }
    */

    .RadMenu_Activate .rmGroup .rmLink:hover,
    .RadMenu_Activate .rmGroup .rmFocused,
    .RadMenu_Activate .rmGroup .rmExpanded
    {
    background-color:#FFEEC2;
    background-image:none;
    border-left: 0px;
    /* with inset border
    padding: 0px;
    border:1px solid #002D96;*/
    }

     And as I mentioned earlier, even the embedded Outlook skin creates the same unwanted new line:

  2. Yana
    Admin
    Yana avatar
    4986 posts

    Posted 23 Sep 2008 Link to this post

    Hello Shaun,

    I am not able to reproduce the issue with the provided styles. Apparently you're using a custom skin, could you please send us the definition of the menu and the skin styles? You can paste it here or open a support ticket and send it as attachment. Thanks

    Sincerely yours,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top