When you deploy a mashup with custom collapsible controls on an external web page, you may experience resize issues with your mashup.

Condition:

A mashup with a custom collapsible control leads to inaccessible gadget content on the external web page.

Cause:

Custom controls that can be expanded or collapsed affect the height and width of the mashup.

Solution

• Put a debugger in the doHarnessResize function. You need to explicitly invoke doHarnessResize() function in the JavaScript API with the following script:

  $('#myCollapsible').on('show.bs.collapse', function () {
    doHarnessResize();
  })

• If the debugger does not stop in the method, then you need to explicitly invoke the doHarnessResize()API method defined in pzpega_ui_doc_harnesssizing.js in the control code. See the following API definition:

  doHarnessResize: function() {
          if(pega.u.d.resizingHarness) {
              /* harness is already being resized */
              return;
          }
          if(pega.util.Event.isIE || pega.util.Event.isSafari || pega.Mashup) {
              clearTimeout(pega.u.d.resizeTimeoutId);
              pega.u.d.resizeTimeoutId = setTimeout(pega.u.d.doHarnessResizeActual, 10);
          }
          else
              pega.u.d.doHarnessResizeActual();
      }, 

• If you still experience a resize issue when the mashup gadget loads, ensure that the host page domain is on the allow list of the application.

  For more information, see Creating a mashup.