Bootstrap .form-control and RecurlyJS iframe

Question

Thank you for your kind reading my question. I have trouble in aligning layout of Recurly subscription form.

In the screenshot, the first 4 items are using .form-control which has inside it. These s are loaded by Recurly JS code after page is loaded.

I tried to make sure height: 32px for those element as well, but I could not figure out why the height of gaps differ than the below ones. I want them to be same as the below ones.

http://paulz.dev.biznessapps.com/global/signup_subscribe?plan=mobileapp59

I used Recurly JS v4. https://js.recurly.com/v4/recurly.js

Thank you! Paul

Answer 1

you can customise styling on input fields as in here.

https://dev.recurly.com/docs/getting-started-1#section-styling-card-fields

Answer 2

Please try this code

  iframe {
        height: 26px!important;
    }