10

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:

enter image description here 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/

pegasuspect
  • 991
  • 4
  • 15
Marijus
  • 4,195
  • 15
  • 52
  • 87
  • 1
    Full disclosure: I work at Braintree. I was not able to replicate this issue with my JSv2 Drop-in integration as I am not seeing the trailing space. Please reach out to our [Support team](https://help.braintreepayments.com/) with additional details so we can troubleshoot further. – Jax Jul 15 '19 at 20:53
  • @JacqueD Thanks! Quick question: is there a chance that bootstrap layout or classes might affect the iframe's height ? I've been able to change the width but is it even possible that my code somehow affects the iframe without specifically targeting it ? You can take a look if you wish here: http://floarplans.com/order/ – Marijus Jul 15 '19 at 21:03
  • @Marijus, its giving a authorization error on the order lnk – Tarun Lalwani Jul 20 '19 at 12:49
  • Can you create a JSFiddle? – Lajos Arpad Jul 20 '19 at 14:06

1 Answers1

3

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.

pegasuspect
  • 991
  • 4
  • 15