Member Avatar for Purandhar

HI I AM USING RICHFACES FOR OUR DEVELOPEMET. WE HAVE A EMBEDDED PDF TO OUR WEB PAGE. NOW THE DROP DOWN MENU ITEMS OR ANY OTHER POPUPS ARE GOING INSIDE THE PDF. I TRIED USING <EMBED> AND IFRAME CAN ANY BODY HELP ME ON THIS?
Thanks in advance

  • 2 Contributors
  • 2 Replies
  • 84 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Purandhar

Dani AI

Generated

reported dropdowns and modal windows rendering behind an embedded PDF. This is most often caused by the PDF being shown by a browser plugin or native viewer that draws in a separate, windowed surface outside the page's normal stacking context. Normal CSS tricks (z-index, changing parent stacking) cannot place HTML above a windowed plugin; the Flash wmode workaround does not apply to PDF plugins. Some modern browsers (Chrome, recent Firefox) use in-page renderers so overlays can work, but behavior varies by browser and plugin.

Practical options:

  • Replace the plugin with an HTML-based renderer so the PDF participates in the DOM; the recommended choice is PDF.js (PDF.js). A quick approach is to point an iframe at web/viewer.html?file=/path/to.pdf from the PDF.js build.
  • If replacing the renderer is not feasible, open the PDF in a separate tab/window or convert pages to images on the server and display those in-page.
  • Ensure UI overlays are appended to the document body and use a high z-index so they are not clipped by container overflow — this helps normal stacking but does not overcome windowed plugin behavior (see understanding z-index).

Troubleshooting steps: confirm whether the browser is using an external plugin by testing in multiple browsers or temporarily disabling the plugin; if the plugin is windowed, plan for an HTML renderer (PDF.js) or an alternative UX (new tab / image pages).

Recommended Answers

All 2 Replies

Member Avatar for remarkablyso

I'm not sure what you mean, could you please clarify?

Do you have a link to the page in question?

Member Avatar for Purandhar

Hi, Actually we are using drop down menus for navigation. In one of the pages we are displaying pdf document in jsf page useing Iframe. And and some buttons along with the pdf document to open modal windows on the same page. Now the problem is when ever we try to use the drop down menu which is dropping over the embedded pdf section is going inside the pdf. At the same time when i click on any buttons to open modal windows is opening the window but wnidow is going inside the pdf. I hope you understand my problem
Thanks in advance

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.