Z-indexing problem in web form

4 posts, 0 answers
  1. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 30 Nov 2010 Link to this post

    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.
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 01 Dec 2010 Link to this post

    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.
  3. DevCraft banner
  4. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 01 Dec 2010 Link to this post

    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.
  5. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 01 Dec 2010 Link to this post

    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.
Back to Top