Iframe's Meta Viewport

[lewiscarvillesputnik]

In it's current state it's incredibly difficult (if not impossible in some cases) to adhere to specific responsive styles, particularly when a project contains many different instances of braintree forms contained within varying width UI elements: sidebar, modal, etc.

Can there be an option to enable the following meta tag in the iframe's head:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Unless I'm mistaken, having this should allow the media queries to conform to the size of the browser window rather than the size of the iframe.

[jplukarski]

Thanks for reporting. Can you go into more detail about which styles are giving you the most trouble? We do allow you to pass some style options when creating Hosted Fields => https://braintree.github.io/braintree-web/3.83.0/module-braintree-web_hosted-fields.html#~styleOptions

[lewiscarville]

In my the case the issues revolve around font-size and the usage of media queries.

If my design drops the font-size of the input from 16px to 15px at a media query of (max-width: 767px) then this is possible through the style options Braintree provides.

However the problem occurs if the iframe is contained within an element that doesn't match the width of the browser viewport. For example sake let's say that element has a fixed width of 500px. The iframe's 'viewport' at this time will always be 500px. Therefore, even if the browser viewport width was 1920px the font-size of the input would still be using the (max-width: 767px) style of 15px instead of 16px. This happens because the media queries currently conform to the width of the iframe instead of the width of the browser viewport.

Now in reality most designs won't be using fixed widths in the world of responsive design. The containing element wrapping the iframe could range anywhere from 66.66% to 50% to 100% of the browser viewport width across various breakpoints. In this case this makes setting up iframe specific media queries incredible difficult to 'sync' with your non iframe media query styles.

[jplukarski]

Thanks for the further explanation, @lewiscarville. Do you happen to have a test/staging site or codepen for us to reproduce your scenario to see if this is something we can add?