How do I make p:media dynamically resizable for a fluid layout?

Question

I'm trying to use a <p:media> (Primefaces 3.5) to display PDF content and am having trouble controlling the height of the p:media. I want the media element to size so as to fill the available space when the user resizes the browser window. I am able to set the width attribute on the tag to 100% and the media element resizes appropriately. However, setting the height attribute to 100% (I want to fill the container) then the height is resolutely stuck at 150px (and it is always 150px).

The following code sizes to fill the available width but not the height.

<p:media  id="theDoc" player="pdf" value="#{userBean.streamedDocument}" height="100%" width="100%">
    <h:outputText value="No renderer available..." />
</p:media>

If I assign the height to be expressed in px, then the height is honored, but of course no resizing takes place with browser changes...

I've tried using CSS styling directly on the element, and upon the resultant <div>/<object> hierarchy but nothing appears to allow the browser to change the height of the displayed pdf.

In addition, trying to use <p:resizable> like this

<p:media id="theDoc" player="pdf" value="#{userBean.streamedDocument}" height="100%" width="100%">
    <h:outputText value="No renderer available..." />
</p:media>
<p:resizable for="theDoc"/>

has no effect either. The showcase says resizable gives resizable behaviour to any JSF component so I think it should work (what I really want is the p:media element to resize to fill 100% of it's parent tho.)...

This appears to be the same across all browsers. I have searched for, and been unable to find any documentation on pdf player parameters that may affect this behaviour. (In fact I've been unable to find any parameters for the pdf player at all.

Can anyone sort out what I'm doing wrong?

Answer 1

If your <p:media> tag is enclosed within an <h:form> tag then you need to add a style attribute:

<h:form style="height: 100%">

You might also need to set the height of the html and body tags in your style sheet:

html, body {
    height: 100%;  
}