Embedded forms in a hidden component doesn't resize properly

Though Donorbox offers a popup donation form, you may need to embed your donation form in a popup modal, an accordion component, or any other component that's hidden on page load, to get your form in-line with your website layout. In such a scenario, the initial height of the donation form is not adjusted properly. It is either too high or too small. This is because browsers don't calculate iframe heights correctly when they are hidden on page load. (Donorbox uses the iframe to securely embed the donation form on you website.)

To solve this issue, Donorbox has added a Javascript API, which should be called immediately after the element is made visible, to adjust the height of the donation form.

window.donorbox.resizeDonationWidget();

It ships as part of your embed code. By default, it tries to find the first Donorbox iframe and resize it if found. If you embedded multiple forms on a single page, use the optional parameter to address the desired iframe. It can be the DOM object or the unique selector of the iframe.

var iframe = document.getElementByID('my-donorbox-iframe');
window.donorbox.resizeDonationWidget(iframe);

// Or

window.donorbox.resizeDonationWidget('#my-donorbox-iframe');
window.donorbox.resizeDonationWidget('.donorbox-container iframe');

Real usage examples

When the donation form is embedded inside a Bootstrap modal:

$(document).ready('shown.bs.modal', '#modal', function() {
  window.donorbox.resizeDonationWidget();
});

Inside a Foundation modal:

$(document).on('opened.fndtn.reveal', '#modal', function () {
  window.donorbox.resizeDonationWidget();
});