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.

https://higherlogicdownload.s3.amazonaws.com/IMWUC/webMethods/Files3/fca27b2ac299418d9fe5e237cbbd486c249c887e_2_999x750.jpeg 1.5x, https://higherlogicdownload.s3.amazonaws.com/IMWUC/webMethods/Files/fca27b2ac299418d9fe5e237cbbd486c249c887e.jpeg 2x" data-dominant-color="E0DFE1">

ScreenShot.JPG1024×768 91.3 KB

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);

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