Though Donorbox offers a popup donation form, you may prefer to embed the donation forms (not the popup donation form) in a custom modal popup, to get inline with the website layout. Most oftenly displayed on click of a link/button or display automatically few seconds after the page is loaded. This means that the embedded donation iframe is hidden on initial load of the page. You may have noticed in such a scenario, the initial height of the donation form is not adjusted properly. Either it is too high or it is too small. However, after a click within the form, the height gets adjusted correctly. This is because an event is fired on click to adjust the height of the form.


By the default behaviour of the browsers, if the iframe is hidden, it's page load events are not triggered. Since the donorbox iframe relies on the page load event to adjust the initial height of the form, it fails to do so.


To solve the issue, Donorbox recently added a javascript API which the site developers can invoke after the donation form is made visible. So if you happen to place the donation form inside a hidden element, you can call the following API immediately after the element is made visible, to adjust the height of the donation form.


window.donorbox.resizeDonationWidget();


Examples:


For bootstrap modals

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


For foundation modals

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