I'm using braintree dropin UI:
<div id="braintree-dropin"></div>
var braintree_client_token = "{{ braintree_client_token }}";
function braintreeSetup() {
// Here you tell Braintree to add the drop-in to your division above
braintree.setup(braintree_client_token, "dropin", {
container: "braintree-dropin"
, onError: function (obj) {
// Errors will be added to the html code
$('[type=submit]').prop('disabled', false);
$('.braintree-notifications').html('<p class="alert alert-danger">' + obj.message + '</p>');
}
});
}
braintreeSetup();
And dropin generated has a lot of unnecessary height:
how do I go about debugging this and what might cause such thing ? I've tested with both production and live enviroments and the same problem persists.
EDIT:
You can find and inspect here: http://floarplans.com/order/
It's because your theme.css line 2480 has the following rule:
iframe {
width: 100%;
min-height: 350px;
border: none;
}
If you include following css at the end of your head tag.
<head>
<!-- Lots of meta and link tags. -->
<style>
iframe#braintree-dropin-frame {
min-height: initial;
}
</style>
</head>
This should reset it back to normal. Because in css, latest and more specific rule overrides the others.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.