Portlet view height

I have a task portlet (screen shot attached). Besides some display fields the view also contains an applet.

I am trying to make the data (fields and applet) cover 100% of the user screen, but I have no luck so far. So far I have tried

  1. Setting applet height to 100%
  2. Setting the sub-group - container css:height to 100%
  3. Setting the Form-JSF command form css:height to 100%

If I put the height of applet in pixel it works. But this is not the best solution as different users have different screen resolutions. I want the UI to cover 100% of all user screens irrespective of the resolution.

Please help. I have run out of options.


Hi Vikas,

I think you would need to put your applet inside a block panel, set the applet height to 100% and then resize the block panel with a script when the window is loaded or resized.

For example, your script block value could be something like this:

function block_resize() {
    var blockId = "#{caf:cid('blockPanel')}";
    var block = $(blockId);
    var blockTop = Position.absoluteOffset(block)[1];
    var windowHeight = Position.windowDimensions().y;
    var footerHeight = $("footer").offsetHeight;
    var extraPadding = 10; //add extra padding to get rid of vertical scrollbar
    var height = windowHeight - blockTop - footerHeight - extraPadding;
      height: height + 'px'

Event.observe(window, "load", block_resize);
Event.observe(window, "resize", block_resize);

Thanks much. Worked nicely. Where to look for these tricks? Any books? Or is it just experience?