CODEWITHSUNDEEP
jsf-2primefaces
gawi
gawi

Reputation: 2962

How to create dialog with percentage height in primefaces

I would like to create a p:dialog component in primefaces with the size given in percents:

<p:dialog header="Dialog" widgetVar="dlg" width="70%" height="70%">
  Some content
</p:dialog>

The code above creates a component with the right width value. However height of the dialog is set to some very minimum value (definitely not 70%).

My question is: how can I set percentage height to the dialog?

I did some research and found in primefaces code that height value is explicitly set to 'auto' and height attribute is assigned to content div. This explains why my code doesn't work, but what can I do to overcome this issue?

Upvotes: 5

Views: 18397

Answers (2)

gawi
gawi

Reputation: 2962

I found a way to do it using javascript. The component definition should be modified:

<p:dialog id="dialog" header="Dialog" widgetVar="dlg" width="70%" height="100%">
  Some content
</p:dialog>

In this way content will fill the dialog completely. And now following javascipt code should be called:

var htmlTag = document.getElementById('dialog');
htmlTag.style.height = Math.floor(window.innerHeight*0.7)+"px";

This will resize a dialog height to 70% of the window height.

Upvotes: 5

vels4j
vels4j

Reputation: 11298

Hight and Width might be given in pixcels, try using style

<p:dialog ... style="width:70% !important; height:70% !important;">
   Some content
</p:dialog>

Upvotes: 1

Related Questions