braintree dropin额外的高度

Question

I'm using braintree dropin UI: 我正在使用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: 并且dropin生成有很多不必要的高度：

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/ 你可以在这里找到并检查： http ： //floarplans.com/order/

Answer 1

It's because your theme.css line 2480 has the following rule: 这是因为你的theme.css第2480行有以下规则：

iframe {
    width: 100%;
    min-height: 350px;
    border: none;
}

If you include following css at the end of your head tag. 如果在head标记的末尾包含以下css。

<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. 因为在css中，最新且更具体的规则会覆盖其他规则。

braintree dropin额外的高度

问题描述

1 个解决方案

解决方案1
3 2019-07-23 20:33:38

braintree dropin额外的高度

问题描述

1 个解决方案

解决方案1 3 2019-07-23 20:33:38

解决方案1
3 2019-07-23 20:33:38