Yahoo Search


Search the web Search this site

Live Search

Google Search

Custom Search

Translate this Web Site to

Sunday, April 03, 2011

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.

image

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.

image

Post a Comment