question

araja avatar image
araja asked araja commented

Issue in clover hosted iframe application running on iphone browser

I have implemented clover hosted iframe application. It looks good on all browsers including android browser. The only problem I am facing in running on iphone browser. All credit card input fields appear truncated as shown in image below.


Also, here is the codepen example: https://codepen.io/gareth-dsouza/pen/MWKbWwv





clover developer community
iphone.jpeg (28.7 KiB)
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

2 Answers

sdesai avatar image
sdesai answered araja commented

We ended up adding 0px padding and margin to inputs to work around this:

'card-number input': {

'font-size': '16px',

'padding': '0px',

'margin': '0px',

}

2 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

David Marginian avatar image David Marginian ♦♦ commented ·

The ecomm team also recommended adding css to resolve the issue.

0 Likes 0 ·
araja avatar image araja David Marginian ♦♦ commented ·

Thanks. It works.

0 Likes 0 ·
David Marginian avatar image
David Marginian Deactivated answered araja commented

I have let the ecomm team know.

1 comment
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

araja avatar image araja commented ·

Thanks. Can this issue be fixed? Is there any ETA for this?

0 Likes 0 ·

Welcome to the
Clover Developer Community