Payment Widget Scrolling

[jasonleming]

I am trying to make the iFrame length relative to the length of the information in the widget (payment form, description, etc). I do not want there to be any scrolling in the iframe, but need the iframes height to adjust based on the length of the info in the form. Here is the code I am using:

<style>.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe SRC="https://connect.clickandpledge.com/w/Organization/cityofrefugeinc/paymentwidget/78919d94-f538-46fa-8be4-9eb54ec13f79" frameborder="0" allowfullscreen></iframe></div>

Right now, people have to scroll down in the iframe and it is confusing some of them because they don't really know that it is scrollable. I tried taking all of the preset code out and just use the iframe to make my own width and height, but there is a massive amount of white space when the form is not that long. Here is an example of what that looks like:

http://www.cityofrefugeatl.org/eden-village-transportation-fund/

And here is the code I used for this:

<iframe align="middle" frameborder="0" width="550" height="1500" scrolling="no" SRC="https://connect.clickandpledge.com/w/Organization/cityofrefugeinc/paymentwidget/78919d94-f538-46fa-8be4-9eb54ec13f79" frameborder="0" allowfullscreen></iframe>

So, just need to know how to modify your iframe code in order to make it relative so we don't run into this issue.

Thanks!
Jason

[CnP.Support]

Good day!

The IFRAME code that we provide is really nothing special. It simply adjusts the width based on the area (DIV tag or table cell) it is placed in.

Go ahead and use your own IFRAME code - it is a simple IFRAME HTML code.

If you want to use the trick we use to adjust the width then change the height to fixed, e.g. 1500px

Not sure I have answered your question.

[jasonleming]

Basically, I want the height of the iframe to adjust to the height of the content, so that I don't get a bunch of white space below, when I have a fixed height. The payment form is 1500 pixels in height, but the place where you select your donation amount is only 400 pixels in height. When you are putting the iframe on a page that doesn't have a white background, there is a 1500 pixel white block below the donation amount (and the first page description). so, I am trying to figure out a way to make the iframe height change to 400 pixels when I am on the page where I select the donation, then change to 1500 pixels when it goes to the payment form. Hope this makes sense.

[CnP.Support]

Good day!

I searched the web and saw the following suggestion:

http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using

Hope that answers the question.

[SNad]

I am having a similar issue (link to page: https://imentor.org/championsbenefit). What is the solution?

[CnP.Support]

Good day @SNad,

The issue is the height and width of the page relative to the IFRAME code. Since you are in an older release (2.x) the widget you are using is not as flexible as the latest release.

Please see the release notes: http://manual.clickandpledge.com/Sal...ase-Notes.html

Your version of 2.6000.22 was EOL'd in August 2015 and not supported. We highly encourage you to upgrade at your earliest convenience. Considering you are so many versions behind we do not recommend an upgrade while you have active events with active registration. Such a jump has the potential to cause interruptions in the registration.

Please let us know if we can be of any assistance.