Portlet view height

, ,
1

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.

Thanks,
Vikas.

ScreenShot.JPG
ScreenShot.JPG1024×768 91.3 KB

2

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;
    
    block.setStyle({
      height: height + 'px'
    });
}

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

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