RadWindow

[Nithya Rani]

Hi In my page i have used Radmenu and Radwindow. My rad menu is always showing on top. because of that radwindow is going down.
Kindly find the attachment you can understand clearly.

[Princy]

Hello,

Try setting high z-index for window and low z-index for menu as shown below.
CSS:

<style  type="text/css">
 .menuCSS
 {
   z-index:200 !important;
 }
 .windowCSS
 {
   z-index:7000 !important;
 }
 </style>

Thanks,
Princy.

[Nithya Rani]

Hi Princy,

I have tryed this till its same.

[Svetlina Anati]

Hi Nithya,

 
This behavior is caused by the fact the RadMenu's z-index is bigger than the one of RadWindow. You can set proper z-indexes in order to get the desired behavior.

For example if you use RadWindowManager you can set it through the style property. Style="z-index:<some value>" can be set to the RadWindowManager only, not to the RadWindow control itself. This is because the z-index of the different RadWindows is dynamically changed - even if you have a RadWindow with z-index 100, it will be displayed over other RadWindows with higher z-index value, if active.

Example:

<telerik:RadWindowManager   
    style="z-index:90000"   
    ID="RadWindowManager1"   
    runat="server">  
</telerik:RadWindowManager> 

In case you are using a single RadWindow you can set its z-index to be less than 3000 in the above shown manner.

You can find a more detailed KB article below:

http://www.telerik.com/support/kb/aspnet-ajax/window/show-radwindow-above-radmenu.aspx

Information about RadControls' z-indexes values is available below:

http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html

I hope that the provided explanations and resources are helpful, let me know how it goes.

Regards,
Svetlina Anati
the Telerik team

[Princy]

Hello,

I have tried to reproduce the issue by setting z-index but no avail. Here is the sample code and screenshot.
ASPX:

<asp:Button ID="Button1" runat="server" Text="open" OnClientClick="OnClientClick(); return false;" />
<telerik:RadMenu ID="RadMenu1" runat="server" CssClass="menuCSS" Skin="Forest">
 <Items>
  <telerik:RadMenuItem Text="item1">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item2">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item3">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item4">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item5">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item6">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="item7">
  </telerik:RadMenuItem>
 </Items>
</telerik:RadMenu>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
  <Windows>
   <telerik:RadWindow ID="RadWindow1" Title="Radwindow" Skin="Forest" runat="server" CssClass="windowCSS">
   </telerik:RadWindow>
  </Windows>
</telerik:RadWindowManager>

CSS:

<style type="text/css">
       .menuCSS
       {
           z-index: 200 !important;
       }
       .windowCSS
       {
           z-index: 7000 !important;
       }
   </style>

Thanks,
Princy.

[Svetlina Anati]

Hi Princy,

Thank you for your assistance and the efforts you have put into resolving and testing the scenario.

However, your code would work for some simple cases but it overrides the default z-index of the wrapper and this might cause problems e.g in the below scenarios:

1) If you have a RadWindowManager, this could defy the logic of dynamically increasing z-indices
2) This could defy the logic behind ShowOnTopWhenMaximized property
3)Other problems due to overriding the style of the wrapper DIV while the inner client zIndex property holds the old value might arise.

That is why I recommend to use the style attribute which has additional embedded logic implemented for this particular case and this is more reliable solution for the case.

Regards,
Svetlina Anati
the Telerik team

[Nithya Rani]

Hi Princy,

Its working fine thank you.