This is a migrated thread and some comments may be shown as answers.

RadMenu scroll problem

0 Answers 162 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ragu
Top achievements
Rank 1
Ragu asked on 04 Apr 2012, 02:08 PM

Hi Telerik Team,


When we scroll the scrollable RadMenu  by using Mouse wheel (moving downwards) till the end, RadMenu popup height is reducing, Due to this effect, only few items are visible in the top of the menu.

This scrollable RadMenu is working fine in (Telerik.Web.UI (2008)) , but it is not working fine in (Telerik.Web.UI (2011).

Design : Default.aspx
----------------------------

                      
                      
                        
                        <telerik:RadMenu ID="rmDisplay" runat="server"   CausesValidation="False"    ClickToOpen="true"   >
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Display: Table"  Value="Table" PostBack="false" >
                                    <GroupSettings ExpandDirection="Up" Height="100px" OffsetX="0"  OffsetY="0" />
                                    
                                    <Items>
                                    
                                    <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                 <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                               
                                
                                
                                    
                                    
                                    </Items>
                                    
                                </telerik:RadMenuItem>
                                
                                 
                                
                            </Items>
                            <DefaultGroupSettings ExpandDirection="Up"     />
                            <CollapseAnimation Duration="200" Type="None"   />
                        </telerik:RadMenu>

---- code ends here ----------------



The code uses the theme file (menu.Agionet.css).


Theme file (menu.agionet.css)
------------------------------------------

/* r.a.d.menu Web 2.0 skin */

.RadMenu_Agionet
{
    /*background: #666666 url('Menu/Agionet/img/MenuItemBackground.gif');*/
    font: normal 9pt Arial, "Ms Sans Serif", "Ms Serif",sans-serif;
    margin: 0;
    padding: 0;
    z-index:3000;
    position: static !important;
}

.RadMenu_Agionet .rmRootGroup
{
     /*max-width: 130px;
    _width: 130px;*/
}
#Filter1_rmX,
#Filter1_rmX .rmText
{    
    /*resize X button */
    width: 14px !important; /* x */
    margin: 0;
    padding: 0;
}

.RadMenu_Agionet .rmLink,
.RadMenu_Agionet .rmLink:visited,
.RadMenu_Agionet .rmLink:active
{
    text-decoration: none;
    color: #004D6B;
    background: #FFFFFF url(Menu/Agionet/img/MainItemBackground.gif) repeat-x bottom center;
    line-height: 22px;
    border: 1px solid #004D6B;
    overflow:hidden;

}
.RadMenu_Agionet .rmLink:hover,
.RadMenu_Agionet .rmFocused,
.RadMenu_Agionet .rmExpanded
{
    color: #FF991A;
    border: 1px solid #FF991A;
    background: #FFFFFF url(Menu/Agionet/img/MainItemBackgroundHover.gif) repeat-x bottom center;
    cursor: hand;
    cursor: pointer;
    overflow:hidden
}
    
.RadMenu_Agionet .rmRootGroup .rmText
{
    /* line-height: 22px; */
    padding: 0 0 0 5px;
    cursor: hand;
    cursor:pointer;
    background-image:none;
    display:block !important; /* x */
    width:100% !important; /* x */
}

.RadMenu_Agionet .rmItem
{
    width:100% !important; /* x */
}

.RadMenu_Agionet .rmSlide
{
    margin-top:-1px;
    border: 0;
    width: 100% !important;
}

.RadMenu_Agionet .rmGroup
{
    
    border: 1px solid #FF991A;
    background: #FFE6C7 url(Menu/Agionet/img/rmGroup_bckgr.gif) repeat-x bottom;
    text-align: left;
    overflow-x:hidden !important;
    overflow-y:auto !important;     
}




.RadMenu_Agionet .rmVertical
{
    /* IE8 fix --- menu type and effekt */
    display: block !important;
    width:100% !important;
    background-color:#FFC884 !important;
    color:#004D6B !important;
    
}


.RadMenu_Agionet .rmGroup .rmLink
{
    background: none;
    border: 0px !important;
    border-bottom: solid 1px #000000;
    width:100% !important; /* x */

}

.RadMenu_Agionet .rmGroup .rmText
{
    background: none;
    margin-right: 0px !important;
    padding-left: 8px;
    padding-right: 8px;
    color: #004D6B;
    _display: inline !important;
    border: 0px !important;
    width:auto !important;
}
.RadMenu_Agionet .rmLeftImage
    {
    margin-right: 5px;
    /*margin: 2px 5px 2px 0;
    padding: 0;*/
    border: 1px solid;
    border-top-color: #5B5B5B;
    border-right-color: #606264;
    border-bottom-color: #CCCCCC;
    border-left-color: #EFEFEF;
    position:relative !important;
    padding:0 !important;
    margin:0 !important;     
    }
.RadMenu_Agionet .rmRightItem { padding: 2px 0;}
.RadMenu_Agionet .rmGroup .rmLink:hover,
.RadMenu_Agionet .rmGroup .rmFocused,
.RadMenu_Agionet .rmGroup .rmExpanded
{
    background: none;
    background-color:#FFC884;
    color: #004D6B;
    /*border-bottom: solid 1px #d8dde0;*/
}


.RadMenu_Agionet .rmHorizontal .rmExpandBottom,  
.RadMenu_Agionet .rmHorizontal .rmExpandTop  
{      overflow-x:hidden;
}

.RadMenu_Agionet .rmVertical .rmSeparator .rmText
{
    padding-top: 2px;
    background: #6788be;
    font-size: 1px;
}



/* mozilla only - disabled state */
.RadMenu_Agionet .rmLink.disabled,
.RadMenu_Agionet .rmLink.disabled:hover {
    color: #CCCCCC;
    border: solid 1px #CCCCCC;
    background-color: #FFFFFF;

}


/*right-to-left support*/

.RadMenu_Agionet_rtl,
.RadMenu_Agionet_rtl *
{
    text-align:right;
}

.RadMenu_Agionet_rtl .rmRootGroup .rmText
{
    padding: 0px;
    margin: 0;
    
}

.RadMenu_Agionet_rtl .rmGroup .rmText
{
    margin-left: 0 !important;

}

.RadMenu_Agionet_rtl .rmHorizontal .rmExpandBottom,  
.RadMenu_Agionet_rtl .rmHorizontal .rmExpandTop  
{  
  background-position:left center;  
}

.RadMenu_Agionet_rtl .rmVertical .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmExpandRight  
{  
  background: transparent url('Menu/Agionet/img/invertedGroupImageRTL.gif') no-repeat left center;
}

.RadMenu_Agionet_rtl .rmGroup .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmExpandRight  
{  
  background: transparent url('Menu/Agionet/img/groupImageRTL.gif') no-repeat 5px center;  
}

.RadMenu_Agionet_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Agionet_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Agionet_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/Agionet/img/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Agionet_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Agionet_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Agionet_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/Agionet/img/groupImageRTL.gif) 5px center no-repeat;
}

#Filter1_divSecondarySelection { margin-right: 1%}

/*#Control1_Help1_rmLogout .rmText,
#Control1_Help1_rmHelp .rmText */
.RadMenu_Agionet_center
{
    text-align:center;
    margin: 0 auto;
    width: 100px !important;
}


---- code ends here ------------



Please do the needful.


Thanks,

V. Raguraman.


No answers yet. Maybe you can help?

Tags
Menu
Asked by
Ragu
Top achievements
Rank 1
Share this question
or