Braintree Custom UI - Input fields too big

Somehow I can’t solve this problem with Braintree custom UI. It generates unexpected behaviour. For example The IFrames are way too big. I tried to disable all heights (aswell those from the body inside the iframe) but then the Iframe height stays. Only by setting a fix pixel height on the Iframe scales it down but that can’t be the solution (It’s ugly seriously).

My JS:

<script src=""></script>
    var clientToken = "XXXXXXXXXXXXXXX....";

    braintree.setup(clientToken, "custom", {
        id: "payment-form",
        hostedFields: {
            number: {
                selector: "#card-number",
                placeholder: "Card Number"
            cvv: {
                selector: "#cvv",
                placeholder: "CVV Number"
            expirationDate: {
                selector: "#expiration-date",
                placeholder: "Date of Expiration"
            styles: {
                // Style all elements
                "input": {
                    "font-size": "14pt",
                    "color": "#3A3A3A"

                // Styling a specific field
                ".number": {
                    "font-family": "monospace"

                // Styling element state
                ":focus": {
                    "color": "blue"
                ".valid": {
                    "color": "green"
                ".invalid": {
                    "color": "red"

                // Media queries
                // Note that these apply to the iframe, not the root window.
                "@media screen and (max-width: 700px)": {
                    "input": {
                        "font-size": "14pt"

My View Code:

<ion-view view-title="My Debts">
    <div data-ng-show="$state.includes('app.taxeslist')">
    <div data-ng-show="$state.includes('app.taxespay')">
            <form action="/checkout" id="payment-form" class="list">
                <label for="card-number" class="item item-input">Card Number</label>
                <div id="card-number"></div>

                <label for="cvv" class="item item-input">CVV Number</label>
                <div id="cvv"></div>

                <label for="expiration-date" class="item item-input">Date of Expiration</label>
                <div id="expiration-date"></div>

                <input type="submit" class="button button-block button-positive" value="Pay" />


1 Like

did you try to something like this ? (disclaimer: i’m not a CSS person !!!) . It works for me

.hosted-field { 
   height: 24px;