Menu Overlapping with Report

If you had lengthier menus in you ASP.Net application and had used report viewer control you may have faced the problem of report and menu overlapping when ever the report is loaded with data. For example in my sample application it appeared as below.

To correct this behavior you need to set the z-index for menu and report viewer using CSS class property. For this I have used the following CSS classes in the Style.CSS.

1. /* CSS Class for the Menu. */
2. div.menu
3. {
4.     padding: 4px 0px 4px 8px;
5. }
6.  
7. /* CSS Class for a Menu Item. */
8. div.menu ul
9. {
10.     list-style: none;
11.     margin: 0px;
12.     padding: 0px;
13.     width: auto;
14.     z-index: 1; /* Setting the control to appear on top of level 0 controls for e.g. report viewer. */
15. }
16.  
17. /* CSS Class for the Report Viewer. */
18. .report
19. {
20.     z-index: 0; /* Setting the control to appear below the level 1 controls for e.g. menu items. */
21. }

To apply the CSS use a code similar to following.

Appling CSS Class to menu in master page.

1. <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
2. EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
3.     <Items>
4.         <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
5.         <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
6.         <asp:MenuItem Text="New Item" Value="New Item">
7.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
8.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
9.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
10.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
11.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
12.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
13.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
14.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
15.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
16.         </asp:MenuItem>
17.         <asp:MenuItem Text="New Item" Value="New Item">
18.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
19.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
20.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
21.         </asp:MenuItem>
22.         <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
23.         <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
24.     </Items>
25. </asp:Menu>

Appling CSS Class to report viewer.

1. <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana" CssClass="report"
2.     Font-Size="8pt" InteractiveDeviceInfos="(Collection)" WaitMessageFont-Names="Verdana"
3.     WaitMessageFont-Size="14pt" Width="636px">
4.     <LocalReport ReportPath="Report1.rdlc">
5.         <DataSources>
6.             <rsweb:ReportDataSource DataSourceId="ObjectDataSource1" Name="DataSet1" />
7.         </DataSources>
8.     </LocalReport>
9. </rsweb:ReportViewer>

 

This will correct the overlapping issue as seen below.