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.