Wednesday, November 19, 2008

Flex z-index and Liferay Portal

We recently encountered an issue when embedding Flex/Flash applications in Liferay Portlets.

The shockwave (.swf) file was showing on top of the liferay navigation menu:













The usual solution is to specify the z-index for the div layers.
There are even some very cool things you can do with Flex overlay.

Liferay however is a third party portal platform and if you don't want to have to change the source code or extend Liferay, a quick fix is to use the wmode argument for the embedded flex application:

<div>
   <embed wmode="transparent" src="<%= request.getContextPath() %>/flex/clinical_data.swf" height=250 width=500>
</div>

You just have to redeploy your portlet and now the menu appears on top of your portlet:

1 comment:

Hugo said...

And what about with the liferay example using swfobject ?
I tried to put something like:

object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="70"
param name="movie" value="/flex/main.swf"
param name="wmode"

...

bit it does not work for me...

Do you know how to fix it using html
OBJECT tag ... not EMBED tag ?

BR