Posted: 22 Jan 2019 10:15 EST Last activity: 7 Feb 2019 2:02 EST
Howto render the Pega mashup without double scrolbars?
We are using a Pega mashup (in version 7.2.1) for going through a process and screenflow (depending on the situation up to 7 screens). Our issue is that the document inside the iframe varies in size and causes a second scrollbar to appear on the screen in many situations. The usual data pega onload / onresize attribute does not solve the issue.
The iframe document changes its height in different ways, for example when a repeating dynamic layout is being loaded through a later AJAX call or when UI visibility rules trigger actions (like showing additional input fields on selecting a radio option, etc.). Hence the "traditional" methods of setting CSS attributes on load or on resize don't work.
The scrollbars would disappear as soon as the iframe css height was set to the scroll height of the contained document - dynamically on each change.
Unfortunately, there is no extension point in the Reload Section activity where we could supply a JS function call taking care of the above.
Is there any way of aligning an iframe css height with the scroll size of the contained document that by itself changes its DOM? Or is there any recommendation from Pega how to leverage the mashup in said situation?
Everytime the harness is refreshed the height of the iframe is set according to the height of the host page.
Even though if you would like to set the iframe height explicilty then you can use the function pega.u.d.postMashupHeight() which will take care of posting the correct height to the iframe and resizing will trigger.
Thanks for the quick answer. So we can either set the iframe height ourselves or use the page function "postMashupHeight()" (in which JS file is the function implemented btw? didn't find it).
And the mashup height is being aligned with the iframe on a harness refresh.
My question is: How can we cover the height changes introduced by async loading of repeat dynamic layouts or through client side UI logic. As per my understanding, several actions modify the sections/DOM within the harness but do not refresh the harness itself. Hence a change of the document height is not being noticed.
Thanks for all the details! One issue is that for example the AJAX request that fills a dynamic repeating layout after page loading does not "inform" the iframe about the changed size of the contained document. Hence the iframe keeps the height that matches the previously empty document and brings up scrollbars. So the core question is: How to cope with (late) AJAX requests that modify document scroll height in the context of the Pega mashup?
OK, thanks for confirmation that resizing is supposed to happen automatically in all "screen update" situations. As a matter of fact we do see double scrollbars after AJAX calls in Pega 7.2.1., the iframe keeps a static calculated initial size. I guess we'll have to think about an SR.