I've used the RadToolBar as a container to display RadMenus. RadToolBar is placed in a Master Page so that it is available with standard features on all pages. RadToolBar is fixed in its position using CSS expressions:
* html .ToolBar_Fixed
{
position:relative !important;
top:expression(eval(document.documentElement.scrollTop? document.documentElement.scrollTop : document.body.scrollTop) + "px");
left:expression(eval(document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px");
}
Now, the issue is that when the content page is scrolled, ToolBar stays at its position but standard dropdown controls (as shown in attached image) are displayed over it, and not under it. This issue appears with IE6 only and is fine with IE7.
On the other hand, when other 3rd party controls (like charts) are to be shown, the RadMenus in the RadToolBar get hidden by the 3rd party controls and are not displayed (probably due to some z-index issue) - This issue exists across browsers.
Please help, as this is needed by the client for go-live very soon.
Thanks.
6 Answers, 1 is accepted
You should add an iframe with the same size as the toolbar next to is in order to fix this overlay issue in IE6. I've attached a simple page to demonstrate how you can do this. Please download the attached file and give it a try.
Regarding the z-index question, please review this blog post for more information.
Greetings,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Did you forget to attach the sample file? I couldn't find it here with the reply.
Can you please provide it again for reference?
Thanks and Regards.
Veenu Munjal
I'm sorry I missed to attach file. Here it is.
Greetings,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
It works! And it worked on the same issue identified on RadWindow as well!
Cheers! :)
Thanks a lot for your support.
Best Regards,
Veenu Munjal
Rank 1
Hi Yana,
First of all, Wish you a very Happy New Year!
I am sorry to bother you with the same old issue, but it has reoccured in the context that two Telerik Controls (RadToolbar and RadMenu) are now struggling for a higher z-index.
Previously, my issue was that all controls (like Textboxes, Dropdowns) were being displayed over the RadToolBar which was fixed in position (not to be scrolled). And you gave me the fix so that RadToolbar is never overridden by any control.
It was great and even worked on similar issues related to RadWindow!
But now, in the header, I have a Culture RadMenu, which can list 10+ cultures, but the RadMenu goes behind the RadToolBar when it should appear over and above it. So a major feature comes to a new halt! :(
Can you please help again on the same?
Thanks and Regards,
Veenu Munjal
Happy New Year!
You should set higher z-index to the menu in order to overlap the toolbar:
<telerik:RadMenu ID="RadMenu1" runat="server" style="z-index: 200001;">Greetings,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.