Verticial Scroll Bar on Desktop

Hey @esd3104 ,

Thanks for contacting us about GoDaddy Payments for WooCommerce! I’m happy to help out ??

I took a look at the Checkout page and was able to see the issue. It seems that the container for the checkout form isn’t adjusting the height to fit correctly with the theme.

Making some changes to the CSS seems to help to get it to fit correctly:

https://cloud.skyver.ge/E0uXEG8l

While customizations are not covered under our?support policy, I’m happy to point you in the right direction here. Please be sure you know how to?add custom CSS to your site, and then, this CSS can be used:

.poynt-collect-payment-container {
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Can you please add this CSS and let me know if it helps to remove the scroll bars on the payment form?

Cheers,
Steve

Thanks – I had been playing with CSS via my browser inspect tools but CSS not really my thing – I know just enough to be dangerous. ??
I have applied the custom CSS but it doesn’t seem to solve the problem. The problem only appears on a desktop PC with a 27inch screen running 1920*1080. On laptops and phones it seems to be OK.

Poking around a little more it seems like the custom CSS is being overridden by CSS coming from PaymentForm.css:7 or PaymetnForm.css:12 served by your cdn. If I play in the inspector changing the height to 230px (not 97% as seems to be coming in and overriding the custom CSS) then the scroll bar goes away.

I did try adding !important after the height value in the custom CSS but that didn’t see to do it.

If you have any other suggestions that would be great, understand this is not part of defined support.

Ideally the iframe would behave more like the regular WC payment entry forms and use the space available and adapt based on screen size/resolution/device type.

Hey @esd3104 ,

Jessica here, stepping in for Steve while he is away. I understand that the CSS you used is being overridden, even when you use the !important CSS filter.

I’ve logged this feature request for our product team to take a look at. While I can’t promise that this feature will be included in a future version of the plugin, I can assure you that someone from my product team will review the feature request and your experience and will bear it in mind for the future. I’m sorry I don’t have better news here!

Could you let me know if you have any other questions?

Thank you,

OK – thanks. I guess every theme and site is different but your iframe doesn’t seem to play nicely the way the built in payment gateways do. I get the iframe is there for PCI Compliance etc. but it still needs to look OK. The stupid unneeded scroll bar is visually bad enough that I won’t use this for live payments until it looks OK on my site.

Hey @esd3104,

My apologies that the CSS was not looking the way you hoped.

Are you wanting the scroll bar removed completely, or are you just wanting the look of the scroll bar to be different?

I’m happy to help where I can!!

All the best,

Thanks for the follow up. Ideally for me there’d be no scroll bar – it just looks silly and there’s no reason for a scroll bar.

I did some more playing and this seems to be somehow Chromium related. On Desktop at 1920*1080 and using Firefox, no scroll bar. On Edge Version 110.0.1587.69 (Official build) (64-bit) and Chrome Version 111.0.5563.65 (Official Build) (64-bit) I see the scroll bar.

Ideally there would be no scroll bar – there’s no reason for it to be there because there’s more than enough room on the screen to see all fields.

Ideally, per some other comments about font size for input fields etc., the iframe would be more aware of the screen resolution / device and adapt accordingly. In the desktop case there’s no need for a scroll bar, the input fields could be larger and use a larger font, and in the desktop case the Expiry and CVC could be on one line.

It appears, just a guess, the iframe is designed for mobile device screens, on which it works well, albeit the small fonts, but it doesn’t respond well to being on a laptop or desktop size screen/resolution. My 02 cents.

Hey @esd3104,

Thank you for clarifying. We are unable to change the CSS of the iframe, however, we can add CSS to remove the scrollbar.

You will need to add the code below to your theme customization settings :

#wc-poynt-credit-card-hosted-form iframe {
height: 237px!important;
}

You may need to increase the px value to your liking.

Could you let me know if this fixes the issue?

All the best,

Excellent, thank you. That seems to work and nicely makes things neat and tidy!

Hey @esd3104,

Excellent!!! I’m glad to hear it!

I’m going to mark this thread as “solved” now, but if you run into any other questions or issues, please feel free to reply again to re-open it or create a follow-up — we’re happy to help out. ??

Hope you have a great week!

All the best,

Amber