Embedded control to display PDF - causes other windows hides

Hi All,

I am using embedded control to view pdf documents in Vaadin, however, this is causing an issue with other windows (or controls) opened. Please take a look at the attached picture and help me on how to fix this. Take a look at the attached image, you can see that date control is behind the PDF viewer.


This is probably the same issue as
ticket #5879
or related to it.

Thank you for responding on this, is there a work around to get it solved? Please help us.


Hi Henri Sara,

I am thinking of debugging this problem to identify the root cause. Please provide me some pointers how to go about it, basically is it the client side code issue or server side?


This is clearly a client side issue, and does not seem to be e.g. a simple question of z-index.

I saw similar problems had been reported e.g.
with Google Earth
as well as other browser plugins. The thread also seems to suggest some iframe based workaround as well as others, but I did not read it in detail.

I would start investigating this with a minimal example that reproduces the issue - if possible, not a Vaadin application but a minimal HTML page.

Then again, I am not really the client side expert.

It will be really helpful if you can help us on this. Let me know if you need any sample application that reproduces this issue either in Vaadin or plan html, I should be able to provide the sample in short time.



I worked on the issue a bit. I created a separate fix for this issue, the flash problem is solvable with a flash parameter wmode.


There is a trivial theme fix that worked on my test environment (win7, ff36, adobe reader x). Wouldn’t be surprised though it there still were issues in some environments. If you want to help, you could test tomorrows 6.5.0.nightly build and report if this is still an issue for you. If you don’t use the reindeer theme (the default), add a similar css rule for your theme. More details in the ticket.


Hi Matti Tahvonen,

Thank you so much for providing a fix for this issue. I will try this today and get back to you.


Hi all,

Still no solution? I have tried to implement the fix proposed in ticket #6219 (changeset 16741) in my custom Chameleon-based theme but it didn’t work. I have added

.v-window-outerheader {
    background: black repeat-x;

.v-window-footer {
	background-color: white;

to mytheme/style.css and mytheme/window/window.css. Was this the correct way to do it?

If I change the theme to Reindeer then the PDF doesn’t overlap my ComboBox or PopupDateField anymore.

Another quick fix I have found was to change the PDF viewer (e.g. PDF Viewer add-on (former pdf.js) for FF) and not use Acrobat viewer anymore. For IE, enabling “Compatibility View” without changing the PDF viewer solves the problem. This might be interesting for those who want to debug the problem. Chrome uses it’s own PDF viewer by default so there’s no problem with this browser :).

But this app is not for me and my clients might not want/be-able to install an add-on or change their PDF viewer … so, is there any plan to fix this?

Thanks a lot!

Vaddin 6.7.6
Latest version for the web browsers

If changing the theme fixes this, it is probably a z-index problem. Use the debugging tools of your browser to inspect and play around with z-indexes of each element to see if you can fix it and then modify the theme to set such z-indexes for the PDF viewer and for various overlays.

Otherwise, search the web for “PDF viewer z-index” - not all browser plug-ins allow overlaying other content on them (in all browsers) but the PDF viewer might, and at least an iframe should be possible to show in front of a PDF viewer plug-in (but implementing this for overlays gets complicated).

Hi Henri,

Thanks for your response. It does not seem to be only a CSS (z-index and background opacity) problem but also of how the different browsers handle the Acrobat plug-in. On Firefox, the problem is solved if the element’s background (or maybe the element itself) has an opacity of 100%. You can all try this test code and see the differences between browsers (make sure all browsers use the Acrobat Reader plugin).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<style type="text/css">
			#square-1, #square-2 {
				position:         absolute;
				z-index:          1;
				height:           100px;
				width:            100px;
				background-color: rgba(255, 0, 0, 1);
			#square-2 {
				background-color: rgba(255, 0, 0, 0.5);
				margin-left:      500px;
			#iframe-div {
				position:         absolute;
				z-index:          0;
				margin:           50px 50px;
			p {
				text-align:       center;
		<div id="square-1"></div>
		<div id="square-2"></div>
		<div id="iframe-div">
			<iframe src="fw4.pdf" height="500" width="500" frameborder="0"></iframe>

With the Acrobat Reader plugin, it half works with Firefox, but does not with Chrome or IE … but at this point it is not a Vaadin issue. I will probably take some time and go ask the Firefox and Chrome team about this.