Menu Overlapping with Report

Posted: April 3, 2011 in .Net, CSS, Web
Tags: , ,

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

Advertisements
Comments
  1. Brundaban Samal says:

    It si not working fine for me.I followed exactly the same steps you have mentioned.I am using asp.net 4.0.

    Could you please tell me if anything I am missing

  2. Arjuna says:

    Hi Brundaban,

    Sorry for the late reply, make sure you did apply the correct style with different z index orders to your menu and report viewer.
    Always make sure the z index of the menu is larger than the report viewer.
    Aother thing which comes up to my mind is sometimes your report viewer might be in another container like a panel. In that case try setting the z index in the container as well.
    Let me know how it goes.

    Regards,
    Arjuna.

  3. Fouzan says:

    Hi Arjuna,

    For me the issue happens, when deployed in server, in local machine there is no issues. I have tried all the fix, but no hope.
    Please provide your suggestions.
    Thanks,
    Fouzan

    • Arjuna says:

      Hi Fouzan,

      After deploying did you try from the server or is this happenning when you access the site from a local machine?
      Also what are the browsers you tried? Is it happenning in all browsers?

      Arjuna.

      • Fouzan says:

        Hi Arjuna,
        Thanks a lot for your reply…. The issue got fixed, as I removed position:relative in css… I was using the default stylesheet came with asp.net 4.0 default website….

        Thanks Again

        Fouzan.

  4. أحمد عبد الله مهدى says:

    God Bless you my Dear 🙂
    Thank u

  5. Rao says:

    Thak you ,it saved me bunch of research time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s