This is a migrated thread and some comments may be shown as answers.

Z-indexing problem in web form

3 Answers 73 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
Johnathan asked on 30 Nov 2010, 10:31 PM
I have created a report that has a header of overlapping images and text.  It looks how I would expect it to in design mode and prints correctly.  The problem is that when I look at the report in my web application, it puts the image that is supposed to be "Sent to back" overtop of both the image and the textbox that should be viewable.

I have attached three screenshots.  VSExhibit.gif is what it looks like in the Visual Studio designer.  PDFExhibit.gif is what the printed page looks like. (Shown as a PDF export)  You will notice that both of these look fine.  WebExhibit.gif is how it displays in my application.

For additional information, the blue background is a GIF (a small bitmap that is stretched in the X-direction), the Logo on the left is a PNG file with a transparent background, and the title "PWR Report" is a text box.

I could have our graphic artist do a combination bitmap as a last resort, but I am hoping there is a proper solution to the problem.

Thanks.

3 Answers, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 01 Dec 2010, 11:18 AM
Hi Johnathan,

This is expected behavior. As explained in the Design Considerations for HTML Rendering help article:

"In HTML report items are located in different cells. If you have overlapping items the result of these items would be undetermined i.e. it would break the original report layout. In case of two or more items that have exactly the same locations only the first item is rendered, the others would not be rendered at all. In general you should not overlap report items at design-time if you plan to export the report to HTML. If there are no overlapping items the report layout is preserved."

All the best,
Steve
the Telerik team
Get started with Telerik Reporting with numerous videos and detailed documentation.
0
Johnathan
Top achievements
Rank 1
answered on 01 Dec 2010, 07:42 PM
I'm not actually exporting, but just using the generic report viewer. Is there a way to display a Telerik ReportViewer any other way but HTML on a web page? Your post says the ovelapping image does not render, but both images are rendering (based on part of the image sticking out from behind), but the one that is sent to back is displaying on top.  Shouldn't it be just a matter of applying different z-indexes to the different images or containing divs based on their ordering in the designer?  When I check the HTML source, both images are posted in the rendered code.

Another alternative that I was trying was using some jquery javascript to isolate the divs with the s1 and s2 classes that are rendered within the iframe to try to adjust the z-index manually, but I haven't figured out the full answer there.
0
Johnathan
Top achievements
Rank 1
answered on 01 Dec 2010, 08:28 PM
I was able to come up with a workaround to my problem by changing the back image to include 20 pixels of white at the top, and then making it a background image for the group rather than a picturebox in the group.  Then the other image placed on top seems to operate correctly for this scenario.
Tags
General Discussions
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Steve
Telerik team
Johnathan
Top achievements
Rank 1
Share this question
or