hidden menu dropdown inside rotator

[Bill O'Neil]

I've tried placing radMenu items inside a rotator (as described here: http://blogs.telerik.com/KevinBabcock/Posts/09-02-28/RadRotator_and_RadMenu_for_ASP_NET_AJAX_Building_an_Interactive_Menu_Together.aspx) and have found that if the menu has a dropdown - it gets cutoff at the edge of the rotator.

I've tried setting the z-index, changing the CSS overflow settings - but nothing seems to work.  Any way around this?

[Fiko]

Hi Bill,

The KB article in question shows how to implement a menu like the one on eXpertsExchange. Please note that such menus have one (root) level only and the idea of the rotation of the menu is to allow you to avoid dropdowns. .
The RadRotator control is designed to provide specific functionality - rotate rich content. That is why there are some restrictions for the displayed content because RadRotator needs to "know" the size of the items and this size should not be changed.

In your case I suggest to use the following approach :

• set the height for RadRotator according to the size of the expanded menu's height.
• remove the borders of RadRotator by overriding the .radr_clipRegion CSS class :
  

  .radr_clipRegion
  {
      border-style: none !important;
  }

• set the new positions of the buttons, depending on your rotator's height. For example, bellow I set the positions of the "Left" and "Right" buttons :
  

  .radr_button.radr_buttonRight
  {
      top: 15px !important;
  }
  .radr_button.radr_buttonLeft
  {
      top: 15px !important;
  }

For your convenience I attached a simple project to this thread that shows the described approach.
I hope this helps.

Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.