Menu
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/
506
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.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
