Root menu bar end image not showing

3 posts, 0 answers
  1. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 10 Aug 2011 Link to this post

    Hello,

    i am using radmenu bar for which i have used telerik image with some color changes but after  last menu bar it is not showing vertical bar  which i want .

    i have atteched scrren shot and image which i have used for the same.

    its very urgent :(

    Below is my css.

    /* <RadMenu / Default> */
      
    .RadMenu_RadMenuCss .rmRootGroup,
    .RadMenu_RadMenuCss a.rmLink,
    .RadMenu_RadMenuCss .rmGroup .rmText,
    .RadMenu_RadMenuCss .rmVertical .rmText,
    .RadMenu_RadMenuCss .rmLeftArrow,
    .RadMenu_RadMenuCss .rmRightArrow,
    .RadMenu_RadMenuCss .rmTopArrow,
    .RadMenu_RadMenuCss .rmBottomArrow
    {
        background-image: url('Menu/rmSprite.png');
        background-color: transparent;
    }
      
    .RadMenu_RadMenuCss .rmRootGroup
    {
        background-repeat: repeat-x;
        background-position: 0 -408px;
        background-color: #e6e6e6;
    }
      
    /* <Root items> */
      
    .RadMenu_RadMenuCss,
    .RadMenu_RadMenuCss a.rmLink
    {
        font-size: 14px
        font-family :Calibri;
        font-style:normal;
        color:#fff;
        background-color:#dcdcdc;
        text-decoration: none;
    }
      
    .RadMenu_RadMenuCss a.rmLink
    {
        background-position: 0 -72px;
    }
      
    .RadMenu_RadMenuCss .rmVertical .rmFirst,
    .RadMenu_RadMenuCss .rmVertical .rmLast
    {
        background: none;
    }
      
    .RadMenu_RadMenuCss a.rmLink:hover,
    .RadMenu_RadMenuCss a.rmFocused,
    .RadMenu_RadMenuCss a.rmSelected
    {
        color : #dcdcdc !important;
        background-color: #dcdcdc !important;
    }
      
    .RadMenu_RadMenuCss .rmHorizontal .rmRootLink span.rmText
    {
        display: inline;
        padding-left: 12px;
    }
      
    .RadMenu_RadMenuCss_rtl .rmRootLink span.rmText
    {
        padding-right: 12px;
    }
      
    .RadMenu_RadMenuCss_Context_rtl .rmRootLink span.rmText
    {
        padding-right: 28px;
    }
      
    .RadMenu_RadMenuCss .rmHorizontal a.rmRootLink
    {
        padding-left: 0;
    }
      
    .RadMenu_RadMenuCss_rtl a.rmRootLink
    {
        margin-left: 0;
        padding: 0;
    }
      
    .RadMenu_RadMenuCss .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */
    {
        width: 100%;
    }
      
    .RadMenu_RadMenuCss ul.rmHorizontal .rmLeftImage
    {
        margin: 4px -4px 0 6px;
    }
      
    .RadMenu_RadMenuCss_rtl ul.rmHorizontal .rmLeftImage
    {
        margin: 4px 6px 0 -4px;
    }
      
    .RadMenu_RadMenuCss .rmVertical a.rmLink
    {
        padding-top: 1px;
        padding-bottom: 1px;
    }
      
    .RadMenu_RadMenuCss .rmVertical a.rmLink:hover,
    .RadMenu_RadMenuCss .rmVertical a.rmFocused,
    .RadMenu_RadMenuCss .rmVertical a.rmSelected,
    .RadMenu_RadMenuCss .rmVertical a.rmExpanded,
    .RadMenu_RadMenuCss .rmVertical a.rmExpanded:hover
    {
        padding-top: 0;
        padding-bottom: 0;
    }
      
    .RadMenu_RadMenuCss .rmVertical .rmFirst a.rmLink:hover,
    .RadMenu_RadMenuCss .rmVertical .rmFirst a.rmFocused,
    .RadMenu_RadMenuCss .rmVertical .rmFirst a.rmSelected,
    .RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded,
    .RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded:hover
    {
        padding-top: 1px;
        padding-bottom: 0;
        border-top-width: 0;
    }
      
    .RadMenu_RadMenuCss .rmVertical .rmLast a.rmLink:hover,
    .RadMenu_RadMenuCss .rmVertical .rmLast a.rmFocused,
    .RadMenu_RadMenuCss .rmVertical .rmLast a.rmSelected,
    .RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded,
    .RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded:hover
    {
        padding-bottom: 1px;
        padding-top: 0;
        border-bottom-width: 0;
    }
      
    .RadMenu_RadMenuCss .rmVertical .rmItem a.rmDisabled:hover
    {
        padding-top: 1px;
        padding-bottom: 1px;
        border-width: 0;
    }
      
    .RadMenu_RadMenuCss a.rmExpanded,
    .RadMenu_RadMenuCss a.rmExpanded:hover
    {
        background-color: #fff;
    }
      
      
    /* </Root items> */
      
      
    /* <Submenu items> */
      
    .RadMenu_RadMenuCss .rmGroup,
    .RadMenu_RadMenuCss .rmMultiColumn,
    .RadMenu_RadMenuCss .rmGroup .rmVertical
    {
        background: #fff url('Menu/rmVSprite.png') repeat-y 0 0;
    }
      
    .RadMenu_RadMenuCss .rmTopFix,
    .RadMenu_RadMenuCss .rmBottomFix,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners ul.rmHorizontal .rmFirst,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
    {
        background-image: url('Menu/rmVSprite.png');
        background-color: #fff
        background-repeat: repeat-y;
    }
      
    * html .rmRoundedCorners_RadMenuCss .rmGroup .rmItem,
    * html .rmRoundedCorners_RadMenuCss ul.rmHorizontal .rmFirst
    {
        background-image: url('Menu/rmVSprite.png');
        background-color: #fff
        background-repeat: repeat-y;
    }
      
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmVertical,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmVertical
    {
        background-image: none;
    }
      
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmGroup,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmItem,
    * html .rmRoundedCorners_RadMenuCss .rmHorizontal .rmItem,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmVertical
    {
        background-image: none;
    }
      
    .RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn
    {
        background-color: #fff;
    }
      
    .RadMenu_RadMenuCss .rmBottomLeft,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmGroup,
    .RadMenu_RadMenuCss .rmRoundedCorners ul.rmGroup,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmMultiColumn
    {
        background-imageurl('Menu/rmRoundedLeft.png');
        background-color: transparent
        background-repeat: no-repeat;
    }
      
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer,
    * html .rmRoundedCorners_RadMenuCss .rmGroup ul.rmGroup,
    * html .rmRoundedCorners_RadMenuCss ul.rmGroup
    {
        background-imageurl('Menu/rmRoundedLeft.png');
        background-color: transparent
        background-repeat: no-repeat;
    }
      
    .RadMenu_RadMenuCss .rmTopRight,
    .RadMenu_RadMenuCss .rmBottomRight
    {
        background-imageurl('Menu/rmRoundedRight.png');
        background-color: transparent
        background-repeat: no-repeat;
    }
      
      
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
    {
        background: #FFF;
    }
      
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopFix,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomFix
    {
        background: #FFF;
    }
      
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
    {
        background-color: #FFF;
        border: 0;
    }
      
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopArrow,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomArrow,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmLeftArrow,
    * html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmRightArrow
    {
        background-color: #FFF;
        border: 0;
    }
      
      
    .RadMenu_RadMenuCss_rtl li.rmTopFix,
    .RadMenu_RadMenuCss_rtl li.rmBottomFix,
    .RadMenu_RadMenuCss_rtl .rmRoundedCorners .rmGroup .rmItem,
    .rmRoundedCorners.RadMenu_RadMenuCss_Context_rtl .rmGroup .rmItem
    {
        background-position: 101% 0;
    }
      
    .RadMenu_RadMenuCss .rmSlide .rmScrollWrap
    {
        background-image: none;
    }
      
    .RadMenu_RadMenuCss_rtl .rmGroup,
    .RadMenu_RadMenuCss_rtl .rmMultiColumn,
    .RadMenu_RadMenuCss_rtl .rmGroup .rmVertical
    {
        background-position: 100% 0;
    }
      
    .RadMenu_RadMenuCss .rmRootGroup li.rmItem .rmGroup
    {
        padding-bottom: 0;
    }
      
    .RadMenu_RadMenuCss .rmRootGroup .rmHorizontal
    {
        background-image: none;
    }
      
    .RadMenu_RadMenuCss .rmScrollWrap .rmVertical
    {
        border: 0;
    }
      
    .RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer li.rmItem
    {
        background: none;
    }
      
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink:hover,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmFocused,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmSelected,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmExpanded
    {
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
    }
      
      
      
    .RadMenu_RadMenuCss .rmGroup a.rmLink,
    .RadMenu_RadMenuCss .rmGroup .rmText,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled:hover,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled .rmText,
    .RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled:hover .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
        background-color: transparent;
    }
      
    .RadMenu_RadMenuCss .rmGroup a.rmLink:hover,
    .RadMenu_RadMenuCss .rmGroup a.rmFocused,
    .RadMenu_RadMenuCss .rmGroup a.rmSelected,
    .RadMenu_RadMenuCss .rmGroup a.rmExpanded
    {
        background-position: 0 -168px;
    }
      
    .RadMenu_RadMenuCss .rmGroup a.rmLink:hover .rmText,
    .RadMenu_RadMenuCss .rmGroup a.rmFocused .rmText,
    .RadMenu_RadMenuCss .rmGroup a.rmSelected .rmText,
    .RadMenu_RadMenuCss .rmGroup a.rmExpanded .rmText
    {
        color : #28638f
        background-position: 100% -192px;
    }
      
      
    /* </rtl> */
      
    /* </Submenu items> */
      
    /* <Submenu offsets (Default - specific, overlapping submenus)> */
      
    .RadMenu_RadMenuCss .rmSlide
    {
        margin: 0 0 0 -1px;
    }
      
    .RadMenu_RadMenuCss .rmVertical .rmSlide,
    .RadMenu_RadMenuCss .rmSlide .rmSlide,
    .RadMenu_RadMenuCss_Context .rmGroup .rmSlide
    {
        margin: 0 0 0 -5px;
    }
      
    .RadMenu_RadMenuCss_rtl .rmSlide
    {
        margin: 0 0 0 0;
    }
      
    .RadMenu_RadMenuCss_rtl .rmFirst .rmSlide
    {
        margin-left: 1px;
    }
      
    .RadMenu_RadMenuCss_rtl .rmVertical .rmSlide,
    .RadMenu_RadMenuCss_rtl .rmSlide .rmSlide,
    .RadMenu_RadMenuCss_Context_rtl .rmGroup .rmSlide
    {
        margin: 0 0 0 5px;
    }
      
      
    /* </Scrolling arrows> */
      
    /* <Separators> */
      
    .RadMenu_RadMenuCss .rmHorizontal .rmSeparator .rmText,
    .RadMenu_RadMenuCss .rmVertical .rmHorizontal .rmSeparator .rmText
    {
        height: 22px;
        margin: 1px 0 0;
        width: 1px;
        background-color: #A8A8A8;
    }
      
    .RadMenu_RadMenuCss_Context .rmSeparator .rmText,
    .RadMenu_RadMenuCss .rmHorizontal .rmGroup .rmSeparator .rmText,
    .RadMenu_RadMenuCss .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
    {
        background-color: transparent;
        background-position: 0 -406px;
    }
      
    /* </Separators> */
      
    /* </RadMenu / Default> */
      
      
    .RadMenu_RadMenuCss .rmVertical 
        background-color#28638f;
    }
      
     .RadMenu_RadMenuCss .rmGroup .rmItem .rmLink
    {
        TEXT-ALIGN: left;
        LINE-HEIGHT: 22px;
        FONT-STYLE: normal;
        TEXT-INDENT: -21px;
        font-size: 13px;
        PADDING-LEFT: 2px;
        MARGIN-LEFT: 2px;
        PADDING-RIGHT: 1px;
        MARGIN-RIGHT: 1px;
        PADDING-BOTTOM: 1px;
        MARGIN-BOTTOM: 1px;
    }


  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Aug 2011 Link to this post

    Hello Mugdha,

    I looked at the sprite image that you apply to the RadMenu and it seems that whenever you apply a background position the separators will appear either on every left side or right side of the RadMenuItem. However, if you need to have a separator on both left and right side you will need to explicitly specify that by adding a RadMenuItem and set its IsSeparator property to true:
    <telerik:RadMenuItem runat="server" IsSeparator="true">
    </telerik:RadMenuItem>

    Best wishes,
    Kate
    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.

  3. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2011 Link to this post

    thnks for your reply , but its not wroking :(

    If i add ISSeperator="true" in all radmenuitem , it will disable all menuitem after debug
Back to Top