Support

Home Forums Event Espresso Premium How do I modify the Iframe width for Authorize.net Accept

How do I modify the Iframe width for Authorize.net Accept

Posted: March 13, 2019 at 2:22 pm


asisnyc

March 13, 2019 at 2:22 pm

Hi –

We are using Authorize.net Accept and the registration checkout form is not displaying properly. I need to move the form to view the information. I’ve made an attempt to explain below. Please let me know if you need any clarifications.

The current width for our iframe checkout is 500px. If I set it to the size of the element above it, the checkout page displays properly.

672px is the size of <div class=”spco-payment-method-desc ee-attention”>
“Please provide the following billing information ” </div>.

Then following this is the registration checkout iframe set to a width of 500px.

When set to 500px, everything is pushed to the right and I have to scroll the to see all checkout information.

Below is the code that sets the width to 500px.

<iframe id=”authnet_accept_iframe” class=”embed-responsive-item accept-iframe” name=”authnet_accept_iframe” frameborder=”0″ scrolling=”auto” style=”height: 830px; width: 500px;”></iframe>

I’m not sure if this would be the fix, but how can I change this to be the same size as spco-payment-method-desc ee-attention?

Any other suggestions to fix the registration checkout page?

Thank you,
Terri


Josh

  • Support Staff

March 13, 2019 at 3:46 pm

Hi Terri,

Much of this will depend on your theme, but a good first step will be to add some custom CSS via the site’s Appearance > Customizer > Additional CSS page. You could start with adding this:

.accept-iframe-container {
    width: 100%;
    min-width: 800px;
    max-width: 1000px;
    margin-left: -5em;
}
#authnet_accept_iframe {
    min-width: 600px;
}

Then try testing a registration. You may need to increase/decrease the percentage and em values in the above.


asisnyc

March 17, 2019 at 5:27 am

Thanks Josh. I’ll give it a try.

The support post ‘How do I modify the Iframe width for Authorize.net Accept’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  asisnyc 4 months ago ago

Topic Tags

Notifications

This topic is: resolved
Do NOT follow this link or you will be banned from the site!