We've a problem with the RadContextMenu not getting its style from the supplied css class. This used to work with the Q1 version but now doesn't with Q2.
This is the aspx code:
<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
<Items>
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
</Items>
</Telerik:RadContextMenu>
And the CSS:
.ContextMenu
{
background: #EEE;
border: 1px solid #999;
}
.ContextMenuItem
{
font-family: Tahoma;
font-size: 11px;
}
I have a feeling its something to do with the way the styles are applied to the rendered controls.
The <head> tag on the page:
The rendered HTML:
This is the aspx code:
<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
<Items>
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
</Items>
</Telerik:RadContextMenu>
And the CSS:
.ContextMenu
{
background: #EEE;
border: 1px solid #999;
}
.ContextMenuItem
{
font-family: Tahoma;
font-size: 11px;
}
I have a feeling its something to do with the way the styles are applied to the rendered controls.
The <head> tag on the page:
<head>
<link href="App_Themes/MyTheme/style.css" type="text/css" rel="stylesheet" />
<link href="/WebSite/WebResource.axd?d=6Tx0JnQCvpljO6kU8QXiaGon_Wi8DODn6lVOSo0OWiAhZUmCEuEsqCnM9kpno6GqYxHpy3iGoT39SD09NDSeUQ2&t=633583818740000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
<link href="/WebSite/WebResource.axd?d=6Tx0JnQCvpljO6kU8QXiaGon_Wi8DODn6lVOSo0OWiD0c8GvHZfAd39EyfNWNYid0&t=633583818740000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
</head>
The rendered HTML:
<div id="ctl00_ContentPlaceHolder1_RadMenu1" class=" ContextMenu"> <div class="RadMenu RadMenu_ rmContextMenu RadMenu__Context"> <ul class="rmActive rmVertical rmGroup rmLevel1">
<li class="rmItem rmFirst"><a href="#" class="rmLink ContextMenuItem"><span class="rmText">Option 1</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink ContextMenuItem"><span class="rmText">Option 2</span></a></li> </ul> </div><input id="ctl00_ContentPlaceHolder1_RadMenu1_ClientState" name="ctl00_ContentPlaceHolder1_RadMenu1_ClientState" type="hidden" /> </div>
If anyone could shed any light on this I would be grateful
5 Answers, 1 is accepted
0
Hi Rick,
Indeed, this is a bug with RadContextMenu. Setting the CssClass property does not apply the class to the proper menu element. I have logged the issue and our developers will see to it.
Meanwhile, you can workaround the problem by simply overriding the .rmContextMenu class. This way you only have to set the CssClass property for the menu items:
This is the aspx code:
<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
<Items>
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
</Items>
</Telerik:RadContextMenu>
And the CSS:
.rmContextMenu
{
background: #EEE;
border: 1px solid #999;
}
.ContextMenuItem
{
font-family: Tahoma;
font-size: 11px;
}
Therefore, setting CssClass="ContextMenu" (highlighted with orange above) is redundant.
Best wishes,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Indeed, this is a bug with RadContextMenu. Setting the CssClass property does not apply the class to the proper menu element. I have logged the issue and our developers will see to it.
Meanwhile, you can workaround the problem by simply overriding the .rmContextMenu class. This way you only have to set the CssClass property for the menu items:
This is the aspx code:
<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
<Items>
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
<Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
</Items>
</Telerik:RadContextMenu>
And the CSS:
.rmContextMenu
{
background: #EEE;
border: 1px solid #999;
}
.ContextMenuItem
{
font-family: Tahoma;
font-size: 11px;
}
Therefore, setting CssClass="ContextMenu" (highlighted with orange above) is redundant.
Best wishes,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Rick
Top achievements
Rank 1
Rank 1
answered on 21 Oct 2008, 12:04 PM
Thank you Peter, I will implement the workaround as recommended :)
0
Grendizer
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2008, 03:04 PM
Hello Peter,
do we have any news on that issue ?!
Thanks in advance for your answer.
do we have any news on that issue ?!
Thanks in advance for your answer.
0
Hi Sebastien,
The problem will be fixed for the next service pack 2 in mid January, 2009. If you need a hotfix beforehand, please open a support ticket and we will send you one.
Kind regards,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The problem will be fixed for the next service pack 2 in mid January, 2009. If you need a hotfix beforehand, please open a support ticket and we will send you one.
Kind regards,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Grendizer
Top achievements
Rank 1
Rank 1
answered on 15 Dec 2008, 01:12 PM
Hello Peter,
Thanks for your answer.
I'll wait for the new release and I'll use the .rmContextMenu selector until this, to apply specific styling.
Regards
Sebastien
Thanks for your answer.
I'll wait for the new release and I'll use the .rmContextMenu selector until this, to apply specific styling.
Regards
Sebastien