Telerik overlapping with radmenu on a aspx Report Viewer Form R1 2023

[Rapitoloco]

hi friends, 

I'm adding a radmenu to a aspx Report Viewer Form, it overlaps the control  bar ot he report, 

   <form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadMenu ID="RadMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
		<br />
        <div>
            <p>what is this shir??</p>
        <telerik:ReportViewer
            ID="reportViewer1" ServiceUrl="api/reports" ScaleMode="Specific"
			Width="100%"
			Height="50%"
			EnableAccessibility="false"
            runat="server">
            <ReportSource IdentifierType="UriReportSource" Identifier="VentasPorCliente.trdp">
            </ReportSource>
			<%-- If set to true shows the Send Mail Message toolbar button --%>
            <SendEmail Enabled = "false" />
        </telerik:ReportViewer>
          </div>
    </form>

do you have any idea how to Fix  this?

Thanks

[Rumen]

We are not aware of this problem in R1 2023 and it is most likely CSS-related. The fix would require updating the z-index and/or repositioning/adjusting the controls.

Here's what you can try to fix this:

Set a higher z-index for the ReportViewer: The z-index property in CSS dictates the stack order of elements that overlap each other. The element with a higher z-index is displayed in front. You might need to add a style tag with a higher z-index value to the ReportViewer control.

<style>
    #reportViewer1 {
        position: relative;
        z-index: 1000; /* Ensure this number is higher than the RadMenu's z-index */
    }
</style>

 

Adjust the z-index of the RadMenu: If you can modify the z-index of the RadMenu to be lower than the ReportViewer, that could also solve the problem.

<style>
    .RadMenu {
        z-index: 10; /* Lower than the ReportViewer's z-index */
    }
</style>

 

Check the positioning: Examine the applied stylesheet from the app to see if the problem is not caused by some global class. Make sure that the positioning of the elements is correct. Use the HTML Inspector of DevTools (F12) to see if the components are not positioned as relative, absolute, or fixed, the z-index will not apply. Adjust the positioning if necessary.

For example, if the reporting is absolutely positioned like this the z-index will not work as well as the menu will be positioned over it as in the reported case:

 

<style>
    #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
        font-family: 'segoe ui', 'ms sans serif';
        overflow: hidden;
    }
</style>

 

In this case, you can increase the top value to 50px, so that the ReportViewer goes beneath the menu:

 

<style>
    #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 50px;
        bottom: 5px;
        font-family: 'segoe ui', 'ms sans serif';
        overflow: hidden;
    }
</style>

If you need further assistance, please make a quick Fiddler Jam Chrome Extension capture and share it with us. It will provide a lot of info easily and allow us to investigate further. Keep in mind that starting from a blank page or at least navigating to your page via the address bar is crucial for capturing all requests and responses:

https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-capture-issues-with-fiddler-jam

[Rapitoloco]

Hi,

Changing the position to relative, makes the reportViewer control dissapear, but changing the TOP property works!, thanks

[Rumen]

You are welcome! Keep up the good work!