braintree-placeholder is adding unnecessary height

General information

• SDK/Library version: 1.8.1
• Browser and OS: Chrome 62 on macOS Sierra

Issue description

Additional height is being added by   character in braintree-placeholder:

Can we get rid of the $nbsp; character that is giving additional height?

[crookedneighbor]

Thanks for the feedback! I’m logging this issue with a “Design Feedback” label so we can address these concerns when we start working on the redesign for Drop-in in the next major version.

[RicLeP]

A solution would be to remove the   from the placeholder so we could use css :empty and display: none; to hide it, then it could be filled when the heading is shown. Currently it makes attractive layouts really akward as the space is too large without the heading shown.

Or remove the placeholder and change how the item animates in.

Update

Adding the following will move the vard box up. This class is replaced with .braintree-show-methods once details are entered which removes the negative margin…

.braintree-show-card {
	margin-top: -30px;
}